From 7ffa351e34532f0d48e42dc51eec39652fc2fd7b Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Tue, 10 Sep 2024 15:06:32 -0400
Subject: [PATCH 01/38] Expose ExplorationAndAnalysis component, update
 date-fns for building library, and get to render in nextJs instance

---
 .../common/map/style-generators/basemap.tsx   |  2 +-
 .../exploration/components/map/index.tsx      | 22 +++++++++----------
 .../components/timeline/date-axis.tsx         |  7 +++---
 .../components/timeline/timeline-controls.tsx |  4 +++-
 .../components/timeline/timeline.tsx          | 22 +++++++++----------
 app/scripts/components/exploration/index.tsx  |  6 ++---
 app/scripts/index.ts                          |  8 ++++++-
 7 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/app/scripts/components/common/map/style-generators/basemap.tsx b/app/scripts/components/common/map/style-generators/basemap.tsx
index b5e037b98..6da325f03 100644
--- a/app/scripts/components/common/map/style-generators/basemap.tsx
+++ b/app/scripts/components/common/map/style-generators/basemap.tsx
@@ -33,7 +33,7 @@ export function Basemap({
   boundariesOption = true
 }: BasemapProps) {
   const { updateStyle } = useMapStyle();
-
+  console.log(`inBasemap`)
   const [baseStyle, setBaseStyle] = useState<Style | undefined>(undefined);
 
   const { data: styleJson } = useQuery(
diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
index c9dc13c34..aa25acfd2 100644
--- a/app/scripts/components/exploration/components/map/index.tsx
+++ b/app/scripts/components/exploration/components/map/index.tsx
@@ -18,12 +18,12 @@ import {
   NavigationControl,
   ScaleControl
 } from '$components/common/map/controls';
-import MapCoordsControl from '$components/common/map/controls/coords';
-import MapOptionsControl from '$components/common/map/controls/map-options';
+// import MapCoordsControl from '$components/common/map/controls/coords';
+// import MapOptionsControl from '$components/common/map/controls/map-options';
 import { projectionDefault } from '$components/common/map/controls/map-options/projections';
 import { useBasemap } from '$components/common/map/controls/hooks/use-basemap';
-import DrawControl from '$components/common/map/controls/aoi';
-import CustomAoIControl from '$components/common/map/controls/aoi/custom-aoi-control';
+// import DrawControl from '$components/common/map/controls/aoi';
+// import CustomAoIControl from '$components/common/map/controls/aoi/custom-aoi-control';
 import { usePreviousValue } from '$utils/use-effect-previous';
 import { ExtendedStyle } from '$components/common/map/styles';
 
@@ -49,7 +49,7 @@ export function ExplorationMap(props: ExplorationMapProps) {
   } = useBasemap();
 
   useReconcileWithStacMetadata(datasets, setDatasets);
-
+  console.log(`inExplorationMap`)
   // Different datasets may have a different default projection.
   // When datasets are selected the first time, we set the map projection to the
   // first dataset's projection.
@@ -140,15 +140,15 @@ export function ExplorationMap(props: ExplorationMapProps) {
       )}
       {/* Map controls */}
       <MapControls>
-        <DrawControl />
-        <CustomAoIControl
+        {/* <DrawControl /> */}
+        {/* <CustomAoIControl
           disableReason={
             comparing && 'Analysis is not possible when comparing dates'
           }
-        />
+        /> */}
         <AnalysisMessageControl />
         <GeocoderControl />
-        <MapOptionsControl
+        {/* <MapOptionsControl
           projection={projection}
           onProjectionChange={setProjection}
           basemapStyleId={mapBasemapId}
@@ -156,10 +156,10 @@ export function ExplorationMap(props: ExplorationMapProps) {
           labelsOption={labelsOption}
           boundariesOption={boundariesOption}
           onOptionChange={onOptionChange}
-        />
+        /> */}
         <ScaleControl />
         <ShowTourControl />
-        <MapCoordsControl />
+        {/* <MapCoordsControl /> */}
         <NavigationControl />
       </MapControls>
       {comparing && (
diff --git a/app/scripts/components/exploration/components/timeline/date-axis.tsx b/app/scripts/components/exploration/components/timeline/date-axis.tsx
index 0e356c061..9f1743847 100644
--- a/app/scripts/components/exploration/components/timeline/date-axis.tsx
+++ b/app/scripts/components/exploration/components/timeline/date-axis.tsx
@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import { ScaleTime } from 'd3';
-import {
-  format, startOfMonth,
-  startOfYear
-} from 'date-fns';
+import format from 'date-fns/format';
+import startOfMonth from 'date-fns/startOfMonth'; 
+import startOfYear from 'date-fns/startOfYear'; 
 import { themeVal } from '@devseed-ui/theme-provider';
 
 import { RIGHT_AXIS_SPACE } from '$components/exploration/constants';
diff --git a/app/scripts/components/exploration/components/timeline/timeline-controls.tsx b/app/scripts/components/exploration/components/timeline/timeline-controls.tsx
index a13224262..fe3a7a4a2 100644
--- a/app/scripts/components/exploration/components/timeline/timeline-controls.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline-controls.tsx
@@ -1,7 +1,9 @@
 import React, { memo, useMemo, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { useAtom, useAtomValue } from 'jotai';
-import { endOfYear, format, startOfYear } from 'date-fns';
+import { format } from 'date-fns';
+import startOfYear from 'date-fns/startOfYear';
+import endOfYear from 'date-fns/endOfYear';
 import { scaleTime, ScaleTime } from 'd3';
 
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx
index 26c88266e..027fb493a 100644
--- a/app/scripts/components/exploration/components/timeline/timeline.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline.tsx
@@ -12,9 +12,9 @@ import {
   isBefore,
   isWithinInterval,
   max,
-  startOfDay,
   sub
 } from 'date-fns';
+import startOfDay from 'date-fns/startOfDay';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import React, {
   useCallback,
@@ -30,11 +30,11 @@ import styled from 'styled-components';
 import { DatasetList } from '../datasets/dataset-list';
 
 import { applyTransform, getLabelFormat, getTemporalExtent, isEqualTransform, rescaleX } from './timeline-utils';
-import {
-  TimelineControls,
-  getInitialScale,
-  TimelineDateAxis,
-} from './timeline-controls';
+// import {
+//   TimelineControls,
+//   getInitialScale,
+//   TimelineDateAxis,
+// } from './timeline-controls';
 import {
   TimelineHeadIn,
   TimelineHeadPoint,
@@ -623,7 +623,7 @@ export default function Timeline(props: TimelineProps) {
     );
   };
   // Stub scale for when there is no layers
-  const initialScale = useMemo(() => getInitialScale(width), [width]);
+  // const initialScale = useMemo(() => getInitialScale(width), [width]);
 
   const minMaxTemporalExtent = useMemo(
     () => getTemporalExtent(
@@ -656,12 +656,12 @@ export default function Timeline(props: TimelineProps) {
       <TimelineWrapper ref={observe}>
         <TimelineHeader>
           <TimelineDetails>{CommonTimelineHeadline()}</TimelineDetails>
-          <TimelineDateAxis xScaled={initialScale} width={width} />
+          {/* <TimelineDateAxis xScaled={initialScale} width={width} /> */}
         </TimelineHeader>
         <TimelineContent>
           <TimelineDetails />
           <EmptyTimelineContentInner>
-            <DateGrid width={width} xScaled={initialScale} />
+            {/* <DateGrid width={width} xScaled={initialScale} /> */}
             <LayerActionBox>
               <div>
                 <CollecticonIsoStack size='xxlarge' />
@@ -700,7 +700,7 @@ export default function Timeline(props: TimelineProps) {
             added
           </small>
         </TimelineDetails>
-        <TimelineControls
+        {/* <TimelineControls
           minMaxTemporalExtent={minMaxTemporalExtent}
           xScaled={xScaled}
           width={width}
@@ -708,7 +708,7 @@ export default function Timeline(props: TimelineProps) {
           outOfViewHeads={outOfViewHeads}
           timeDensity={lowestCommonTimeDensity}
           timelineLabelsFormat={timelineLabelFormat}
-        />
+        /> */}
       </TimelineHeader>
       <TimelineContent>
         {shouldRenderTimeline && (
diff --git a/app/scripts/components/exploration/index.tsx b/app/scripts/components/exploration/index.tsx
index d50b55512..5c93bd8e2 100644
--- a/app/scripts/components/exploration/index.tsx
+++ b/app/scripts/components/exploration/index.tsx
@@ -6,7 +6,7 @@ import { themeVal } from '@devseed-ui/theme-provider';
 import { useAtom, useSetAtom } from 'jotai';
 import Timeline from './components/timeline/timeline';
 import { ExplorationMap } from './components/map';
-import { DatasetSelectorModal } from './components/dataset-selector-modal';
+// import { DatasetSelectorModal } from './components/dataset-selector-modal';
 import { useAnalysisController } from './hooks/use-analysis-data-request';
 import { TimelineDataset } from './types.d.ts';
 import { selectedCompareDateAtom, selectedDateAtom } from './atoms/dates';
@@ -119,10 +119,10 @@ function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
           />
         </Panel>
       </PanelGroup>
-      <DatasetSelectorModal
+      {/* <DatasetSelectorModal
         revealed={datasetModalRevealed}
         close={closeModal}
-      />
+      /> */}
     </Container>
   );
 }
diff --git a/app/scripts/index.ts b/app/scripts/index.ts
index 82f15097b..c6af8ad50 100644
--- a/app/scripts/index.ts
+++ b/app/scripts/index.ts
@@ -20,6 +20,8 @@ import PageHeader from '$components/common/page-header';
 import LogoContainer from '$components/common/page-header/logo-container';
 import type { NavItem, InternalNavLink, NavItemType } from '$components/common/page-header/types';
 
+import ExplorationAndAnalysis from '$components/exploration';
+import { timelineDatasetsAtom } from '$components/exploration/atoms/datasets';
 
 export {
   // COMPONENTS
@@ -43,6 +45,7 @@ export {
   ReactQueryProvider,
   StoriesHubContent,
   LogoContainer,
+  ExplorationAndAnalysis,
 
   // HOOKS and utility functions
   useFiltersWithQS,
@@ -50,5 +53,8 @@ export {
   // TYPES
   NavItem,
   NavItemType,
-  InternalNavLink
+  InternalNavLink,
+
+  // STATE
+  timelineDatasetsAtom
 };

From 7061c7f66896913bd71381b5f3fdc6ef1c993667 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 16 Sep 2024 11:14:03 -0400
Subject: [PATCH 02/38] Comment out analysis message for now

---
 .../components/map/analysis-message-control.tsx    |  4 ++--
 .../exploration/components/timeline/timeline.tsx   | 14 +++++++-------
 app/scripts/components/exploration/index.tsx       |  1 +
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/scripts/components/exploration/components/map/analysis-message-control.tsx b/app/scripts/components/exploration/components/map/analysis-message-control.tsx
index 973ae0dce..c28a8ce56 100644
--- a/app/scripts/components/exploration/components/map/analysis-message-control.tsx
+++ b/app/scripts/components/exploration/components/map/analysis-message-control.tsx
@@ -23,7 +23,7 @@ import useAois from '$components/common/map/controls/hooks/use-aois';
 import { calcFeatCollArea } from '$components/common/aoi/utils';
 import { formatDateRange } from '$utils/date';
 import { useAnalysisController } from '$components/exploration/hooks/use-analysis-data-request';
-import useThemedControl from '$components/common/map/controls/hooks/use-themed-control';
+// import useThemedControl from '$components/common/map/controls/hooks/use-themed-control';
 import { getZoomFromBbox } from '$components/common/map/utils';
 import { AoIFeature } from '$components/common/map/types';
 import { ShortcutCode } from '$styles/shortcut-code';
@@ -166,7 +166,7 @@ export function AnalysisMessage({ mainMap }: { mainMap: MapRef | undefined }) {
 
 export function AnalysisMessageControl() {
   const { main } = useMaps();
-  useThemedControl(() => <AnalysisMessage mainMap={main} />, { position: 'top-left' });
+  // useThemedControl(() => <AnalysisMessage mainMap={main} />, { position: 'top-left' });
 
   return null;
 }
diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx
index 027fb493a..2169affea 100644
--- a/app/scripts/components/exploration/components/timeline/timeline.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline.tsx
@@ -30,11 +30,11 @@ import styled from 'styled-components';
 import { DatasetList } from '../datasets/dataset-list';
 
 import { applyTransform, getLabelFormat, getTemporalExtent, isEqualTransform, rescaleX } from './timeline-utils';
-// import {
-//   TimelineControls,
-//   getInitialScale,
-//   TimelineDateAxis,
-// } from './timeline-controls';
+import {
+  TimelineControls,
+  getInitialScale,
+  TimelineDateAxis,
+} from './timeline-controls';
 import {
   TimelineHeadIn,
   TimelineHeadPoint,
@@ -700,7 +700,7 @@ export default function Timeline(props: TimelineProps) {
             added
           </small>
         </TimelineDetails>
-        {/* <TimelineControls
+        <TimelineControls
           minMaxTemporalExtent={minMaxTemporalExtent}
           xScaled={xScaled}
           width={width}
@@ -708,7 +708,7 @@ export default function Timeline(props: TimelineProps) {
           outOfViewHeads={outOfViewHeads}
           timeDensity={lowestCommonTimeDensity}
           timelineLabelsFormat={timelineLabelFormat}
-        /> */}
+        />
       </TimelineHeader>
       <TimelineContent>
         {shouldRenderTimeline && (
diff --git a/app/scripts/components/exploration/index.tsx b/app/scripts/components/exploration/index.tsx
index 5c93bd8e2..49870ef20 100644
--- a/app/scripts/components/exploration/index.tsx
+++ b/app/scripts/components/exploration/index.tsx
@@ -16,6 +16,7 @@ const Container = styled.div`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
+  height: 100%; // @TODO-SANDRA: Added because it wasn't showing up but this will need to recheck this
 
   .panel-wrapper {
     flex-grow: 1;

From a6dfab5581594972fbaf7fa1f49ead4f9e7c8358 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 16 Sep 2024 14:48:38 -0400
Subject: [PATCH 03/38] Decouple datasets selector modal from E&A

---
 .../dataset-selector-modal/index.tsx          |  4 --
 .../components/timeline/timeline.tsx          | 38 +++++++++++--------
 .../components/exploration/container.tsx      | 16 +++++++-
 app/scripts/components/exploration/index.tsx  | 17 ++-------
 app/scripts/index.ts                          |  2 +
 5 files changed, 42 insertions(+), 35 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 adb58e596..529ed0c6a 100644
--- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
+++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
@@ -9,8 +9,6 @@ import {
   ModalHeader
 } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
-
-
 import { Link } from 'react-router-dom';
 import { timelineDatasetsAtom } from '../../atoms/datasets';
 import {
@@ -19,9 +17,7 @@ import {
 import {   datasetLayers,
   allExploreDatasets} from '../../data-utils';
 import RenderModalHeader from './header';
-
 import ModalFooterRender from './footer';
-
 import CatalogContent from '$components/common/catalog/catalog-content';
 import { DATASETS_PATH } from '$utils/routes';
 import { useFiltersWithURLAtom } from '$components/common/catalog/controls/hooks/use-filters-with-query';
diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx
index 2169affea..c8e1a0088 100644
--- a/app/scripts/components/exploration/components/timeline/timeline.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline.tsx
@@ -170,7 +170,7 @@ interface TimelineProps {
   setSelectedDay: (d: Date | null) => void;
   selectedCompareDay: Date | null;
   setSelectedCompareDay: (d: Date | null) => void;
-  onDatasetAddClick: () => void;
+  onDatasetAddClick?: () => void;
   panelHeight: number;
 }
 
@@ -612,13 +612,17 @@ export default function Timeline(props: TimelineProps) {
     return (
       <Headline>
         <TimelineHeading as='h2'>Data layers</TimelineHeading>
-        <Button
-          variation='primary-fill'
-          size='small'
-          onClick={onDatasetAddClick}
-        >
-          <CollecticonPlusSmall title='Add layer' /> Add layer
-        </Button>
+        {
+          onDatasetAddClick && (
+            <Button
+              variation='primary-fill'
+              size='small'
+              onClick={onDatasetAddClick}
+            >
+              <CollecticonPlusSmall title='Add layer' /> Add layer
+            </Button>
+          )
+        }
       </Headline>
     );
   };
@@ -666,13 +670,17 @@ export default function Timeline(props: TimelineProps) {
               <div>
                 <CollecticonIsoStack size='xxlarge' />
                 <p>No data layer added to the map!</p>
-                <Button
-                  variation='base-text'
-                  size='small'
-                  onClick={onDatasetAddClick}
-                >
-                  Add a layer here
-                </Button>
+                {
+                  onDatasetAddClick && (
+                    <Button
+                      variation='base-text'
+                      size='small'
+                      onClick={onDatasetAddClick}
+                    >
+                      Add a layer here
+                    </Button>
+                  )
+                }
               </div>
             </LayerActionBox>
           </EmptyTimelineContentInner>
diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx
index dd048c3bc..e8fbf4835 100644
--- a/app/scripts/components/exploration/container.tsx
+++ b/app/scripts/components/exploration/container.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { TourProvider } from '@reactour/tour';
 import { DevTools } from 'jotai-devtools';
 import { useAtom } from 'jotai';
@@ -10,6 +10,7 @@ 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 { DatasetSelectorModal } from './components/dataset-selector-modal';
 
 
 /**
@@ -33,8 +34,15 @@ export default function ExplorationAndAnalysisContainer() {
   // atomWithLocation gets initialized outside of Exploration page and returns the previous page's value
   // We check if url Atom actually returns the values for exploration page here.
   const [currentUrl]= useAtom(urlAtom);
+  const [datasetModalRevealed, setDatasetModalRevealed] = useState(
+    !datasets.length
+  );
+
   if(!currentUrl.pathname?.includes(EXPLORATION_PATH)) return null;
 
+  const openModal = () => setDatasetModalRevealed(true);
+  const closeModal = () => setDatasetModalRevealed(false);
+
   return (
     <TourProvider
       steps={[]}
@@ -50,7 +58,11 @@ export default function ExplorationAndAnalysisContainer() {
       <TourManager />
       <PageMainContent>
         <PageHero title='Exploration' isHidden />
-        <ExplorationAndAnalysis datasets={datasets} setDatasets={setDatasets} />
+        <ExplorationAndAnalysis datasets={datasets} setDatasets={setDatasets} openDatasetsSelectionModal={openModal} />
+        <DatasetSelectorModal
+          revealed={datasetModalRevealed}
+          close={closeModal}
+        />
       </PageMainContent>
     </TourProvider>
   );
diff --git a/app/scripts/components/exploration/index.tsx b/app/scripts/components/exploration/index.tsx
index 49870ef20..c7e8622e2 100644
--- a/app/scripts/components/exploration/index.tsx
+++ b/app/scripts/components/exploration/index.tsx
@@ -6,7 +6,6 @@ import { themeVal } from '@devseed-ui/theme-provider';
 import { useAtom, useSetAtom } from 'jotai';
 import Timeline from './components/timeline/timeline';
 import { ExplorationMap } from './components/map';
-// import { DatasetSelectorModal } from './components/dataset-selector-modal';
 import { useAnalysisController } from './hooks/use-analysis-data-request';
 import { TimelineDataset } from './types.d.ts';
 import { selectedCompareDateAtom, selectedDateAtom } from './atoms/dates';
@@ -58,10 +57,11 @@ const Container = styled.div`
 interface ExplorationAndAnalysisProps {
   datasets: TimelineDataset[];
   setDatasets: (datasets: TimelineDataset[]) => void;
+  openDatasetsSelectionModal?: () => void;
 }
 
 function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
-  const { datasets, setDatasets } = props;
+  const { datasets, setDatasets, openDatasetsSelectionModal } = props;
 
   const [selectedDay, setSelectedDay] = useAtom(selectedDateAtom);
 
@@ -69,16 +69,9 @@ function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
     selectedCompareDateAtom
   );
 
-  const [datasetModalRevealed, setDatasetModalRevealed] = useState(
-    !datasets.length
-  );
-
   // @TECH-DEBT: panelHeight  needs to be passed to work around Safari CSS
   const [panelHeight, setPanelHeight] = useState(0);
 
-  const openModal = useCallback(() => setDatasetModalRevealed(true), []);
-  const closeModal = useCallback(() => setDatasetModalRevealed(false), []);
-
   const setUrl = useSetAtom(urlAtom);
   const { reset: resetAnalysisController } = useAnalysisController();
 
@@ -115,15 +108,11 @@ function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
             setSelectedDay={setSelectedDay}
             selectedCompareDay={selectedCompareDay}
             setSelectedCompareDay={setSelectedCompareDay}
-            onDatasetAddClick={openModal}
+            onDatasetAddClick={openDatasetsSelectionModal}
             panelHeight={panelHeight}
           />
         </Panel>
       </PanelGroup>
-      {/* <DatasetSelectorModal
-        revealed={datasetModalRevealed}
-        close={closeModal}
-      /> */}
     </Container>
   );
 }
diff --git a/app/scripts/index.ts b/app/scripts/index.ts
index c6af8ad50..f6b152995 100644
--- a/app/scripts/index.ts
+++ b/app/scripts/index.ts
@@ -22,6 +22,7 @@ import type { NavItem, InternalNavLink, NavItemType } from '$components/common/p
 
 import ExplorationAndAnalysis from '$components/exploration';
 import { timelineDatasetsAtom } from '$components/exploration/atoms/datasets';
+import { DatasetSelectorModal } from '$components/exploration/components/dataset-selector-modal';
 
 export {
   // COMPONENTS
@@ -46,6 +47,7 @@ export {
   StoriesHubContent,
   LogoContainer,
   ExplorationAndAnalysis,
+  DatasetSelectorModal,
 
   // HOOKS and utility functions
   useFiltersWithQS,

From ef45523fa730e3e0a0daefb913ab96333282a966 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 16 Sep 2024 22:12:18 -0400
Subject: [PATCH 04/38] fix datepicker and abandom modal version

---
 .../exploration/components/timeline/timeline-datepicker.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/scripts/components/exploration/components/timeline/timeline-datepicker.tsx b/app/scripts/components/exploration/components/timeline/timeline-datepicker.tsx
index de7ee5016..8632c8aa9 100644
--- a/app/scripts/components/exploration/components/timeline/timeline-datepicker.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline-datepicker.tsx
@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import React from "react";
 import { CollecticonChevronDownSmall } from "@devseed-ui/collecticons";
 import { glsp, themeVal } from "@devseed-ui/theme-provider";

From 11eb1347bbf23936e79f9f42c7a869c093b93d1d Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 16 Sep 2024 22:45:24 -0400
Subject: [PATCH 05/38] clean some things up and uncomment things out

---
 .../common/map/style-generators/basemap.tsx    |  1 -
 .../exploration/components/map/index.tsx       | 18 +++++++++---------
 .../components/timeline/timeline.tsx           |  6 +++---
 app/scripts/components/exploration/index.tsx   |  5 +++--
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/scripts/components/common/map/style-generators/basemap.tsx b/app/scripts/components/common/map/style-generators/basemap.tsx
index 6da325f03..ad866f7f5 100644
--- a/app/scripts/components/common/map/style-generators/basemap.tsx
+++ b/app/scripts/components/common/map/style-generators/basemap.tsx
@@ -33,7 +33,6 @@ export function Basemap({
   boundariesOption = true
 }: BasemapProps) {
   const { updateStyle } = useMapStyle();
-  console.log(`inBasemap`)
   const [baseStyle, setBaseStyle] = useState<Style | undefined>(undefined);
 
   const { data: styleJson } = useQuery(
diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
index aa25acfd2..2d5bab26c 100644
--- a/app/scripts/components/exploration/components/map/index.tsx
+++ b/app/scripts/components/exploration/components/map/index.tsx
@@ -18,12 +18,12 @@ import {
   NavigationControl,
   ScaleControl
 } from '$components/common/map/controls';
-// import MapCoordsControl from '$components/common/map/controls/coords';
-// import MapOptionsControl from '$components/common/map/controls/map-options';
+import MapCoordsControl from '$components/common/map/controls/coords';
+import MapOptionsControl from '$components/common/map/controls/map-options';
 import { projectionDefault } from '$components/common/map/controls/map-options/projections';
 import { useBasemap } from '$components/common/map/controls/hooks/use-basemap';
-// import DrawControl from '$components/common/map/controls/aoi';
-// import CustomAoIControl from '$components/common/map/controls/aoi/custom-aoi-control';
+import DrawControl from '$components/common/map/controls/aoi';
+// import CustomAoIControl from '$components/common/map/controls/aoi/custom-aoi-control'; // @TODO: This breaks - need to fix
 import { usePreviousValue } from '$utils/use-effect-previous';
 import { ExtendedStyle } from '$components/common/map/styles';
 
@@ -49,7 +49,7 @@ export function ExplorationMap(props: ExplorationMapProps) {
   } = useBasemap();
 
   useReconcileWithStacMetadata(datasets, setDatasets);
-  console.log(`inExplorationMap`)
+
   // Different datasets may have a different default projection.
   // When datasets are selected the first time, we set the map projection to the
   // first dataset's projection.
@@ -140,7 +140,7 @@ export function ExplorationMap(props: ExplorationMapProps) {
       )}
       {/* Map controls */}
       <MapControls>
-        {/* <DrawControl /> */}
+        <DrawControl />
         {/* <CustomAoIControl
           disableReason={
             comparing && 'Analysis is not possible when comparing dates'
@@ -148,7 +148,7 @@ export function ExplorationMap(props: ExplorationMapProps) {
         /> */}
         <AnalysisMessageControl />
         <GeocoderControl />
-        {/* <MapOptionsControl
+        <MapOptionsControl
           projection={projection}
           onProjectionChange={setProjection}
           basemapStyleId={mapBasemapId}
@@ -156,10 +156,10 @@ export function ExplorationMap(props: ExplorationMapProps) {
           labelsOption={labelsOption}
           boundariesOption={boundariesOption}
           onOptionChange={onOptionChange}
-        /> */}
+        />
         <ScaleControl />
         <ShowTourControl />
-        {/* <MapCoordsControl /> */}
+        <MapCoordsControl />
         <NavigationControl />
       </MapControls>
       {comparing && (
diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx
index c8e1a0088..b47798e52 100644
--- a/app/scripts/components/exploration/components/timeline/timeline.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline.tsx
@@ -627,7 +627,7 @@ export default function Timeline(props: TimelineProps) {
     );
   };
   // Stub scale for when there is no layers
-  // const initialScale = useMemo(() => getInitialScale(width), [width]);
+  const initialScale = useMemo(() => getInitialScale(width), [width]);
 
   const minMaxTemporalExtent = useMemo(
     () => getTemporalExtent(
@@ -660,12 +660,12 @@ export default function Timeline(props: TimelineProps) {
       <TimelineWrapper ref={observe}>
         <TimelineHeader>
           <TimelineDetails>{CommonTimelineHeadline()}</TimelineDetails>
-          {/* <TimelineDateAxis xScaled={initialScale} width={width} /> */}
+          <TimelineDateAxis xScaled={initialScale} width={width} />
         </TimelineHeader>
         <TimelineContent>
           <TimelineDetails />
           <EmptyTimelineContentInner>
-            {/* <DateGrid width={width} xScaled={initialScale} /> */}
+            <DateGrid width={width} xScaled={initialScale} />
             <LayerActionBox>
               <div>
                 <CollecticonIsoStack size='xxlarge' />
diff --git a/app/scripts/components/exploration/index.tsx b/app/scripts/components/exploration/index.tsx
index c7e8622e2..5e4242cba 100644
--- a/app/scripts/components/exploration/index.tsx
+++ b/app/scripts/components/exploration/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import styled from 'styled-components';
 import { themeVal } from '@devseed-ui/theme-provider';
@@ -11,11 +11,12 @@ import { TimelineDataset } from './types.d.ts';
 import { selectedCompareDateAtom, selectedDateAtom } from './atoms/dates';
 import { CLEAR_LOCATION, urlAtom } from '$utils/params-location-atom/url';
 
+// @TODO: "height: 100%" Added for exploration container to show correctly in NextJs instance but investigate why this is needed and possibly work to remove
 const Container = styled.div`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
-  height: 100%; // @TODO-SANDRA: Added because it wasn't showing up but this will need to recheck this
+  height: 100%;
 
   .panel-wrapper {
     flex-grow: 1;

From a31fc6dfcbecc9d6560caac2b85b83f2647acb71 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 16 Sep 2024 22:50:38 -0400
Subject: [PATCH 06/38] Uncomment and comment out source of breakage for
 analysis-message-control

---
 .../exploration/components/map/analysis-message-control.tsx   | 4 ++--
 app/scripts/components/exploration/components/map/index.tsx   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/scripts/components/exploration/components/map/analysis-message-control.tsx b/app/scripts/components/exploration/components/map/analysis-message-control.tsx
index c28a8ce56..973ae0dce 100644
--- a/app/scripts/components/exploration/components/map/analysis-message-control.tsx
+++ b/app/scripts/components/exploration/components/map/analysis-message-control.tsx
@@ -23,7 +23,7 @@ import useAois from '$components/common/map/controls/hooks/use-aois';
 import { calcFeatCollArea } from '$components/common/aoi/utils';
 import { formatDateRange } from '$utils/date';
 import { useAnalysisController } from '$components/exploration/hooks/use-analysis-data-request';
-// import useThemedControl from '$components/common/map/controls/hooks/use-themed-control';
+import useThemedControl from '$components/common/map/controls/hooks/use-themed-control';
 import { getZoomFromBbox } from '$components/common/map/utils';
 import { AoIFeature } from '$components/common/map/types';
 import { ShortcutCode } from '$styles/shortcut-code';
@@ -166,7 +166,7 @@ export function AnalysisMessage({ mainMap }: { mainMap: MapRef | undefined }) {
 
 export function AnalysisMessageControl() {
   const { main } = useMaps();
-  // useThemedControl(() => <AnalysisMessage mainMap={main} />, { position: 'top-left' });
+  useThemedControl(() => <AnalysisMessage mainMap={main} />, { position: 'top-left' });
 
   return null;
 }
diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
index 2d5bab26c..803c58d33 100644
--- a/app/scripts/components/exploration/components/map/index.tsx
+++ b/app/scripts/components/exploration/components/map/index.tsx
@@ -8,7 +8,7 @@ import {
   TimelineDatasetSuccess
 } from '../../types.d.ts';
 import { Layer } from './layer';
-import { AnalysisMessageControl } from './analysis-message-control';
+// import { AnalysisMessageControl } from './analysis-message-control';
 import { ShowTourControl } from './tour-control';
 
 import Map, { Compare, MapControls } from '$components/common/map';
@@ -146,7 +146,7 @@ export function ExplorationMap(props: ExplorationMapProps) {
             comparing && 'Analysis is not possible when comparing dates'
           }
         /> */}
-        <AnalysisMessageControl />
+        {/* <AnalysisMessageControl /> */}
         <GeocoderControl />
         <MapOptionsControl
           projection={projection}

From bcbf657281715344d2f959711890647fb38aa84a Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 16 Sep 2024 22:53:02 -0400
Subject: [PATCH 07/38] add comment

---
 app/scripts/components/exploration/components/map/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
index 803c58d33..9edc908d9 100644
--- a/app/scripts/components/exploration/components/map/index.tsx
+++ b/app/scripts/components/exploration/components/map/index.tsx
@@ -8,7 +8,7 @@ import {
   TimelineDatasetSuccess
 } from '../../types.d.ts';
 import { Layer } from './layer';
-// import { AnalysisMessageControl } from './analysis-message-control';
+// import { AnalysisMessageControl } from './analysis-message-control'; // @TODO: This breaks - need to fix
 import { ShowTourControl } from './tour-control';
 
 import Map, { Compare, MapControls } from '$components/common/map';

From ad732f7b47e3d94eee91d37ee611b018c1f25bf7 Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Mon, 21 Oct 2024 14:25:37 +0200
Subject: [PATCH 08/38] Fix draw controls and analysis message

---
 .../map/controls/aoi/custom-aoi-control.tsx   | 32 +++++++++++-----
 .../common/map/controls/aoi/index.tsx         | 37 ++++++++++---------
 .../map/controls/hooks/use-themed-control.tsx |  3 +-
 .../exploration/components/map/index.tsx      | 12 +++---
 .../components/timeline/timeline-controls.tsx |  2 +-
 .../components/exploration/container.tsx      |  2 +-
 6 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
index 9d5a5ae18..244a2c9b0 100644
--- a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
+++ b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
@@ -330,29 +330,43 @@ export default function CustomAoIControl({
   disableReason?: React.ReactNode;
 }) {
   const { main } = useMaps();
-
   const { isDrawing } = useAois();
 
   // Start/stop the drawing.
   useEffect(() => {
-    // Property was added to access draw control.
-    const mbDraw = main?._drawControl;
-    if (!mbDraw) return;
+    if (!main) return;
+
+    const changeDrawMode = () => {
+      const mbDraw = main._drawControl;
+      if (!mbDraw) return;
+
+      if (isDrawing) {
+        mbDraw.changeMode(DRAW_POLYGON);
+      } else {
+        mbDraw.changeMode(SIMPLE_SELECT, {
+          featureIds: mbDraw.getSelectedIds()
+        });
+      }
+    };
 
-    if (isDrawing) {
-      mbDraw.changeMode(DRAW_POLYGON);
+    if (main.loaded()) {
+      changeDrawMode();
     } else {
-      mbDraw.changeMode(SIMPLE_SELECT, {
-        featureIds: mbDraw.getSelectedIds()
-      });
+      main.on('load', changeDrawMode);
+      return () => {
+        main.off('load', changeDrawMode);
+      };
     }
   }, [main, isDrawing]);
 
+
   useThemedControl(
     () => <CustomAoI map={main} disableReason={disableReason} />,
     {
       position: 'top-left'
     }
   );
+
   return null;
 }
+
diff --git a/app/scripts/components/common/map/controls/aoi/index.tsx b/app/scripts/components/common/map/controls/aoi/index.tsx
index 3f8a4b2da..75f0a6795 100644
--- a/app/scripts/components/common/map/controls/aoi/index.tsx
+++ b/app/scripts/components/common/map/controls/aoi/index.tsx
@@ -2,7 +2,7 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import StaticMode from '@mapbox/mapbox-gl-draw-static-mode';
 import { useTheme } from 'styled-components';
 import { useAtomValue } from 'jotai';
-import { useRef } from 'react';
+import { useEffect } from 'react';
 import { useControl } from 'react-map-gl';
 import useAois from '../hooks/use-aois';
 import { aoisFeaturesAtom } from './atoms';
@@ -30,13 +30,12 @@ const customDirectSelect = {
 
 export default function DrawControl(props: DrawControlProps) {
   const theme = useTheme();
-  const control = useRef<MapboxDraw>();
   const aoisFeatures = useAtomValue(aoisFeaturesAtom);
   const { onUpdate, onDelete, onSelectionChange, onDrawModeChange } = useAois();
 
-  useControl<MapboxDraw>(
-    () => {
-      control.current = new MapboxDraw({
+  const drawControl = useControl<MapboxDraw>(
+    () =>
+      new MapboxDraw({
         displayControlsDefault: false,
         styles: computeDrawStyles(theme),
         modes: {
@@ -46,24 +45,17 @@ export default function DrawControl(props: DrawControlProps) {
           [DIRECT_SELECT]: customDirectSelect
         },
         ...props
-      });
-      return control.current;
-    },
-    ({ map }: { map: any }) => {
-      map._drawControl = control.current;
+      }),
+    ({ map }) => {
+      // @ts-expect-error - private prop
+      map._drawControl = drawControl;
       map.on('draw.create', onUpdate);
       map.on('draw.update', onUpdate);
       map.on('draw.delete', onDelete);
       map.on('draw.selectionchange', onSelectionChange);
       map.on('draw.modechange', onDrawModeChange);
-      map.on('load', () => {
-        control.current?.set({
-          type: 'FeatureCollection',
-          features: aoisFeatures
-        });
-      });
     },
-    ({ map }: { map: any }) => {
+    ({ map }) => {
       map.off('draw.create', onUpdate);
       map.off('draw.update', onUpdate);
       map.off('draw.delete', onDelete);
@@ -75,5 +67,14 @@ export default function DrawControl(props: DrawControlProps) {
     }
   );
 
+  useEffect(() => {
+    if (drawControl?.map) {
+      drawControl.set({
+        type: 'FeatureCollection',
+        features: aoisFeatures
+      });
+    }
+  }, [drawControl, aoisFeatures]);
+
   return null;
-}
+}
\ No newline at end of file
diff --git a/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx b/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
index ff50f88a6..5ef5476ff 100644
--- a/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
+++ b/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
@@ -38,13 +38,14 @@ export default function useThemedControl(
           rootRef.current = null;
         }
 
+        elementRef.current = null;
       }, 1);
     }
   }
 
   // Listen for changes in dependencies and re-render if necessary
   useEffect(() => {
-    if (rootRef.current) {
+    if (rootRef.current && elementRef.current) {
       rootRef.current.render(
         <ThemeProvider theme={theme}>{renderFn() as any}</ThemeProvider>
       );
diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
index 9edc908d9..c853ff7c2 100644
--- a/app/scripts/components/exploration/components/map/index.tsx
+++ b/app/scripts/components/exploration/components/map/index.tsx
@@ -8,7 +8,7 @@ import {
   TimelineDatasetSuccess
 } from '../../types.d.ts';
 import { Layer } from './layer';
-// import { AnalysisMessageControl } from './analysis-message-control'; // @TODO: This breaks - need to fix
+import { AnalysisMessageControl } from './analysis-message-control';
 import { ShowTourControl } from './tour-control';
 
 import Map, { Compare, MapControls } from '$components/common/map';
@@ -22,10 +22,10 @@ import MapCoordsControl from '$components/common/map/controls/coords';
 import MapOptionsControl from '$components/common/map/controls/map-options';
 import { projectionDefault } from '$components/common/map/controls/map-options/projections';
 import { useBasemap } from '$components/common/map/controls/hooks/use-basemap';
-import DrawControl from '$components/common/map/controls/aoi';
-// import CustomAoIControl from '$components/common/map/controls/aoi/custom-aoi-control'; // @TODO: This breaks - need to fix
 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';
 
 interface ExplorationMapProps {
   datasets: TimelineDataset[];
@@ -141,12 +141,12 @@ export function ExplorationMap(props: ExplorationMapProps) {
       {/* Map controls */}
       <MapControls>
         <DrawControl />
-        {/* <CustomAoIControl
+        <CustomAoIControl
           disableReason={
             comparing && 'Analysis is not possible when comparing dates'
           }
-        /> */}
-        {/* <AnalysisMessageControl /> */}
+        />
+        <AnalysisMessageControl />
         <GeocoderControl />
         <MapOptionsControl
           projection={projection}
diff --git a/app/scripts/components/exploration/components/timeline/timeline-controls.tsx b/app/scripts/components/exploration/components/timeline/timeline-controls.tsx
index fe3a7a4a2..60511e782 100644
--- a/app/scripts/components/exploration/components/timeline/timeline-controls.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline-controls.tsx
@@ -1,7 +1,7 @@
 import React, { memo, useMemo, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { useAtom, useAtomValue } from 'jotai';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import startOfYear from 'date-fns/startOfYear';
 import endOfYear from 'date-fns/endOfYear';
 import { scaleTime, ScaleTime } from 'd3';
diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx
index e8fbf4835..829ef7bd2 100644
--- a/app/scripts/components/exploration/container.tsx
+++ b/app/scripts/components/exploration/container.tsx
@@ -4,13 +4,13 @@ import { DevTools } from 'jotai-devtools';
 import { useAtom } from 'jotai';
 import { PopoverTourComponent, TourManager } from './tour-manager';
 import { timelineDatasetsAtom } from './atoms/datasets';
+import { DatasetSelectorModal } from './components/dataset-selector-modal';
 import ExplorationAndAnalysis from '.';
 import { urlAtom } from '$utils/params-location-atom/url';
 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 { DatasetSelectorModal } from './components/dataset-selector-modal';
 
 
 /**

From 9f4e65cfca0c11d4e30e466d1b8b0a3acc7add8a Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Tue, 22 Oct 2024 11:59:17 +0200
Subject: [PATCH 09/38] Fix lint

---
 .../components/exploration/components/timeline/date-axis.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/scripts/components/exploration/components/timeline/date-axis.tsx b/app/scripts/components/exploration/components/timeline/date-axis.tsx
index 9f1743847..811b08863 100644
--- a/app/scripts/components/exploration/components/timeline/date-axis.tsx
+++ b/app/scripts/components/exploration/components/timeline/date-axis.tsx
@@ -2,8 +2,8 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import { ScaleTime } from 'd3';
 import format from 'date-fns/format';
-import startOfMonth from 'date-fns/startOfMonth'; 
-import startOfYear from 'date-fns/startOfYear'; 
+import startOfMonth from 'date-fns/startOfMonth';
+import startOfYear from 'date-fns/startOfYear';
 import { themeVal } from '@devseed-ui/theme-provider';
 
 import { RIGHT_AXIS_SPACE } from '$components/exploration/constants';

From 9afeaaa52cbe126245a5936db98565c1bb81ee1c Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Tue, 22 Oct 2024 12:02:48 +0200
Subject: [PATCH 10/38] Fix unmount error

---
 .../common/map/controls/hooks/use-themed-control.tsx      | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx b/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
index 5ef5476ff..d6508c393 100644
--- a/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
+++ b/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
@@ -45,11 +45,17 @@ export default function useThemedControl(
 
   // Listen for changes in dependencies and re-render if necessary
   useEffect(() => {
-    if (rootRef.current && elementRef.current) {
+    let isMounted = true;
+
+    if (rootRef.current && elementRef.current && isMounted) {
       rootRef.current.render(
         <ThemeProvider theme={theme}>{renderFn() as any}</ThemeProvider>
       );
     }
+
+    return () => {
+      isMounted = false;
+    };
   }, [renderFn, theme]);
 
   useControl(() => new ThemedControl(), opts);

From af3451151980c302db2451eff5fd71a402125211 Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Wed, 23 Oct 2024 09:11:44 +0200
Subject: [PATCH 11/38] Clean up

---
 .../common/map/controls/aoi/index.tsx         | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/app/scripts/components/common/map/controls/aoi/index.tsx b/app/scripts/components/common/map/controls/aoi/index.tsx
index 75f0a6795..4b21787da 100644
--- a/app/scripts/components/common/map/controls/aoi/index.tsx
+++ b/app/scripts/components/common/map/controls/aoi/index.tsx
@@ -2,14 +2,19 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import StaticMode from '@mapbox/mapbox-gl-draw-static-mode';
 import { useTheme } from 'styled-components';
 import { useAtomValue } from 'jotai';
-import { useEffect } from 'react';
+import { useRef } from 'react';
 import { useControl } from 'react-map-gl';
+import type { MapRef } from 'react-map-gl';
 import useAois from '../hooks/use-aois';
 import { aoisFeaturesAtom } from './atoms';
 import { computeDrawStyles } from './style';
 
 type DrawControlProps = MapboxDraw.DrawOptions;
 
+interface ExtendedMapRef extends MapRef {
+  _drawControl?: MapboxDraw;
+}
+
 export const STATIC_MODE = 'static_mode';
 export const SIMPLE_SELECT = 'simple_select';
 export const DIRECT_SELECT = 'direct_select';
@@ -32,10 +37,11 @@ export default function DrawControl(props: DrawControlProps) {
   const theme = useTheme();
   const aoisFeatures = useAtomValue(aoisFeaturesAtom);
   const { onUpdate, onDelete, onSelectionChange, onDrawModeChange } = useAois();
+  const mapRef = useRef<ExtendedMapRef | null>(null);
 
   const drawControl = useControl<MapboxDraw>(
-    () =>
-      new MapboxDraw({
+    () => {
+      const control = new MapboxDraw({
         displayControlsDefault: false,
         styles: computeDrawStyles(theme),
         modes: {
@@ -45,15 +51,26 @@ export default function DrawControl(props: DrawControlProps) {
           [DIRECT_SELECT]: customDirectSelect
         },
         ...props
-      }),
+      });
+      return control;
+    },
     ({ map }) => {
-      // @ts-expect-error - private prop
-      map._drawControl = drawControl;
+      mapRef.current = map as ExtendedMapRef;
+      const extendedMap = map as ExtendedMapRef;
+      // We're making the controls available on the map instance for later use throughout
+      // the app (e.g in the CustomAoIControl)
+      extendedMap._drawControl = drawControl;
       map.on('draw.create', onUpdate);
       map.on('draw.update', onUpdate);
       map.on('draw.delete', onDelete);
       map.on('draw.selectionchange', onSelectionChange);
       map.on('draw.modechange', onDrawModeChange);
+      map.on('load', () => {
+        drawControl.set({
+          type: 'FeatureCollection',
+          features: aoisFeatures
+        });
+      });
     },
     ({ map }) => {
       map.off('draw.create', onUpdate);
@@ -61,20 +78,12 @@ export default function DrawControl(props: DrawControlProps) {
       map.off('draw.delete', onDelete);
       map.off('draw.selectionchange', onSelectionChange);
       map.off('draw.modechange', onDrawModeChange);
+      mapRef.current = null;
     },
     {
       position: 'top-left'
     }
   );
 
-  useEffect(() => {
-    if (drawControl?.map) {
-      drawControl.set({
-        type: 'FeatureCollection',
-        features: aoisFeatures
-      });
-    }
-  }, [drawControl, aoisFeatures]);
-
   return null;
 }
\ No newline at end of file

From 39dfb202c586363bd07004d70578f91d9853e31d Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Thu, 24 Oct 2024 08:57:31 +0200
Subject: [PATCH 12/38] Switch to non-ref object usage

---
 app/scripts/components/common/map/controls/aoi/index.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/scripts/components/common/map/controls/aoi/index.tsx b/app/scripts/components/common/map/controls/aoi/index.tsx
index 4b21787da..808cc9164 100644
--- a/app/scripts/components/common/map/controls/aoi/index.tsx
+++ b/app/scripts/components/common/map/controls/aoi/index.tsx
@@ -2,7 +2,6 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import StaticMode from '@mapbox/mapbox-gl-draw-static-mode';
 import { useTheme } from 'styled-components';
 import { useAtomValue } from 'jotai';
-import { useRef } from 'react';
 import { useControl } from 'react-map-gl';
 import type { MapRef } from 'react-map-gl';
 import useAois from '../hooks/use-aois';
@@ -37,7 +36,6 @@ export default function DrawControl(props: DrawControlProps) {
   const theme = useTheme();
   const aoisFeatures = useAtomValue(aoisFeaturesAtom);
   const { onUpdate, onDelete, onSelectionChange, onDrawModeChange } = useAois();
-  const mapRef = useRef<ExtendedMapRef | null>(null);
 
   const drawControl = useControl<MapboxDraw>(
     () => {
@@ -55,11 +53,9 @@ export default function DrawControl(props: DrawControlProps) {
       return control;
     },
     ({ map }) => {
-      mapRef.current = map as ExtendedMapRef;
-      const extendedMap = map as ExtendedMapRef;
       // We're making the controls available on the map instance for later use throughout
       // the app (e.g in the CustomAoIControl)
-      extendedMap._drawControl = drawControl;
+      (map as ExtendedMapRef)._drawControl = drawControl;
       map.on('draw.create', onUpdate);
       map.on('draw.update', onUpdate);
       map.on('draw.delete', onDelete);
@@ -78,7 +74,6 @@ export default function DrawControl(props: DrawControlProps) {
       map.off('draw.delete', onDelete);
       map.off('draw.selectionchange', onSelectionChange);
       map.off('draw.modechange', onDrawModeChange);
-      mapRef.current = null;
     },
     {
       position: 'top-left'

From df5da6cbd4fe64e124f8c9749445865cd161c034 Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Fri, 25 Oct 2024 11:09:06 +0200
Subject: [PATCH 13/38] Remove obsolete code and add a comment

---
 .../map/controls/aoi/custom-aoi-control.tsx   | 27 +++++--------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
index 244a2c9b0..931c3de86 100644
--- a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
+++ b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
@@ -332,34 +332,21 @@ export default function CustomAoIControl({
   const { main } = useMaps();
   const { isDrawing } = useAois();
 
-  // Start/stop the drawing.
+  // Start the drawing mode when isDrawing is true
+  // There's no need to switch back to 'simple_select' mode when !isDrawing
+  // as Mapbox Draw handles this internally when the drawing is completed
   useEffect(() => {
     if (!main) return;
 
-    const changeDrawMode = () => {
-      const mbDraw = main._drawControl;
-      if (!mbDraw) return;
+    const mbDraw = main._drawControl;
 
-      if (isDrawing) {
-        mbDraw.changeMode(DRAW_POLYGON);
-      } else {
-        mbDraw.changeMode(SIMPLE_SELECT, {
-          featureIds: mbDraw.getSelectedIds()
-        });
-      }
-    };
+    if (!mbDraw) return;
 
-    if (main.loaded()) {
-      changeDrawMode();
-    } else {
-      main.on('load', changeDrawMode);
-      return () => {
-        main.off('load', changeDrawMode);
-      };
+    if (isDrawing) {
+      mbDraw.changeMode(DRAW_POLYGON);
     }
   }, [main, isDrawing]);
 
-
   useThemedControl(
     () => <CustomAoI map={main} disableReason={disableReason} />,
     {

From 1a6cff1ee4fbe1e3ef6a8a8624a072759ba94744 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Tue, 22 Oct 2024 15:14:27 -0400
Subject: [PATCH 14/38] Make dataselectormodal exportable

---
 app/scripts/components/common/card/index.tsx  |  9 +----
 .../common/catalog/catalog-card.tsx           | 37 +++++++------------
 .../common/catalog/catalog-content.tsx        |  2 +-
 .../components/common/catalog/index.tsx       |  3 +-
 .../dataset-selector-modal/index.tsx          | 26 ++++++-------
 .../components/exploration/container.tsx      | 13 +++++--
 .../components/stories/hub/hub-content.tsx    | 10 ++---
 app/scripts/types/veda.ts                     | 10 ++++-
 8 files changed, 52 insertions(+), 58 deletions(-)

diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
index ce98fac0b..7692ba37e 100644
--- a/app/scripts/components/common/card/index.tsx
+++ b/app/scripts/components/common/card/index.tsx
@@ -1,4 +1,4 @@
-import React, { lazy, MouseEventHandler, ComponentType } from 'react';
+import React, { lazy, MouseEventHandler } from 'react';
 import styled, { css } from 'styled-components';
 import { format } from 'date-fns';
 import { CollecticonExpandTopRight } from '@devseed-ui/collecticons';
@@ -25,6 +25,7 @@ import HorizontalInfoCard, {
 import { variableBaseType, variableGlsp } from '$styles/variable-utils';
 import { ElementInteractive } from '$components/common/element-interactive';
 import { Figure } from '$components/common/figure';
+import { LinkProperties } from '$types/veda';
 
 type CardType = 'classic' | 'cover' | 'featured' | 'horizontal-info';
 
@@ -230,12 +231,6 @@ export function ExternalLinkFlag() {
   );
 }
 
-export interface LinkProperties {
-  LinkElement: string | ComponentType<any> | undefined;
-  pathAttributeKeyName: string;
-  onLinkClick?: MouseEventHandler;
-}
-
 export interface LinkWithPathProperties extends LinkProperties {
   linkTo: string;
 }
diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx
index e9a85a751..d4a580bb5 100644
--- a/app/scripts/components/common/catalog/catalog-card.tsx
+++ b/app/scripts/components/common/catalog/catalog-card.tsx
@@ -1,27 +1,18 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import {
-  CollecticonPlus,
-  CollecticonTickSmall,
-  iconDataURI
-} from '@devseed-ui/collecticons';
-import { glsp, themeVal } from '@devseed-ui/theme-provider';
-
-import { Card, LinkProperties } from '../card';
-import { CardMeta, CardTopicsList } from '../card/styles';
-import { DatasetClassification } from '../dataset-classification';
-import { CardSourcesList } from '../card-sources';
-import TextHighlight from '../text-highlight';
+import React from "react";
+import styled, { css } from "styled-components";
+import { CollecticonPlus, CollecticonTickSmall, iconDataURI } from "@devseed-ui/collecticons";
+import { glsp, themeVal } from "@devseed-ui/theme-provider";
+import { Card } from "../card";
+import { CardMeta, CardTopicsList } from "../card/styles";
+import { DatasetClassification } from "../dataset-classification";
+import { CardSourcesList } from "../card-sources";
+import TextHighlight from "../text-highlight";
 import { getDatasetDescription, getMediaProperty } from './utils';
-import { DatasetData, DatasetLayer } from '$types/veda';
-import { getDatasetPath } from '$utils/routes';
-import {
-  TAXONOMY_SOURCE,
-  TAXONOMY_TOPICS,
-  getAllTaxonomyValues,
-  getTaxonomy
-} from '$utils/veda-data/taxonomies';
-import { Pill } from '$styles/pill';
+import { LinkProperties } from '$types/veda';
+import { DatasetData, DatasetLayer } from "$types/veda";
+import { getDatasetPath } from "$utils/routes";
+import { TAXONOMY_SOURCE, TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data/taxonomies";
+import { Pill } from "$styles/pill";
 
 interface CatalogCardProps {
   dataset: DatasetData;
diff --git a/app/scripts/components/common/catalog/catalog-content.tsx b/app/scripts/components/common/catalog/catalog-content.tsx
index 6240116f8..34de58ff7 100644
--- a/app/scripts/components/common/catalog/catalog-content.tsx
+++ b/app/scripts/components/common/catalog/catalog-content.tsx
@@ -3,13 +3,13 @@ import styled from 'styled-components';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import TextHighlight from '../text-highlight';
 import { CollecticonDatasetLayers } from '../icons/dataset-layers';
-import { LinkProperties } from '../card';
 import { prepareDatasets } from './prepare-datasets';
 import FiltersControl from './filters-control';
 import { CatalogCard } from './catalog-card';
 import CatalogTagsContainer from './catalog-tags';
 
 import { FilterActions } from './utils';
+import { LinkProperties } from '$types/veda';
 import { DatasetData, DatasetDataWithEnhancedLayers } from '$types/veda';
 import { CardList } from '$components/common/card/styles';
 import EmptyHub from '$components/common/empty-hub';
diff --git a/app/scripts/components/common/catalog/index.tsx b/app/scripts/components/common/catalog/index.tsx
index f4dddfc52..bff33ded7 100644
--- a/app/scripts/components/common/catalog/index.tsx
+++ b/app/scripts/components/common/catalog/index.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { themeVal } from '@devseed-ui/theme-provider';
-import { LinkProperties } from '../card';
 import CatalogContent from './catalog-content';
-import { DatasetData } from '$types/veda';
+import { DatasetData, LinkProperties } from '$types/veda';
 import {
   useSlidingStickyHeaderProps
 } from '$components/common/layout-root/useSlidingStickyHeaderProps';
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 529ed0c6a..138b5fdac 100644
--- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
+++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useAtom } from 'jotai';
-import { DatasetData, DatasetLayer } from 'veda';
 import {
   Modal,
   ModalBody,
@@ -9,20 +8,17 @@ import {
   ModalHeader
 } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
-import { Link } from 'react-router-dom';
 import { timelineDatasetsAtom } from '../../atoms/datasets';
 import {
   reconcileDatasets
 } from '../../data-utils-no-faux-module';
-import {   datasetLayers,
-  allExploreDatasets} from '../../data-utils';
+import {   datasetLayers } from '../../data-utils';
 import RenderModalHeader from './header';
 import ModalFooterRender from './footer';
 import CatalogContent from '$components/common/catalog/catalog-content';
-import { DATASETS_PATH } from '$utils/routes';
 import { useFiltersWithURLAtom } from '$components/common/catalog/controls/hooks/use-filters-with-query';
 import { FilterActions } from '$components/common/catalog/utils';
-import SmartLink from '$components/common/smart-link';
+import { DatasetData, LinkProperties, DatasetLayer } from '$types/veda';
 
 const DatasetModal = styled(Modal)`
   z-index: ${themeVal('zIndices.modal')};
@@ -69,10 +65,14 @@ const DatasetModal = styled(Modal)`
 interface DatasetSelectorModalProps {
   revealed: boolean;
   close: () => void;
+  linkProperties: LinkProperties;
+  datasets: DatasetData[];
+  datasetPathName: string;
 }
 
 export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
-  const { revealed, close } = props;
+  const { revealed, linkProperties, datasets, datasetPathName, close } = props;
+  const { LinkElement , pathAttributeKeyName } = linkProperties as { LinkElement: React.ElementType, pathAttributeKeyName: string };
 
   const [timelineDatasets, setTimelineDatasets] = useAtom(timelineDatasetsAtom);
   const [selectedIds, setSelectedIds] = useState<string[]>(
@@ -100,7 +100,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
     onAction(FilterActions.CLEAR);
     close();
   }, [close, selectedIds, timelineDatasets, setTimelineDatasets, onAction]);
-
+  const linkElementProps = {[pathAttributeKeyName]: datasetPathName};
   return (
     <DatasetModal
       id='modal'
@@ -113,21 +113,19 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
       )}
       content={
         <CatalogContent
-          datasets={allExploreDatasets}
+          datasets={datasets}
           search={searchTerm}
           taxonomies={taxonomies}
           selectedIds={selectedIds}
           setSelectedIds={setSelectedIds}
           onAction={onAction}
           filterLayers={true}
-          linkProperties={{
-            LinkElement: SmartLink,
-            pathAttributeKeyName: 'to'
-          }}
+          linkProperties={linkProperties}
+          pathname={datasetPathName}
           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 <Link to={DATASETS_PATH} target='_blank'>Data Catalog</Link>.</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>
             </>
           }
         />
diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx
index 829ef7bd2..e1afe3753 100644
--- a/app/scripts/components/exploration/container.tsx
+++ b/app/scripts/components/exploration/container.tsx
@@ -5,14 +5,15 @@ import { useAtom } from 'jotai';
 import { PopoverTourComponent, TourManager } from './tour-manager';
 import { timelineDatasetsAtom } from './atoms/datasets';
 import { DatasetSelectorModal } from './components/dataset-selector-modal';
+import { allExploreDatasets} from './data-utils';
 import ExplorationAndAnalysis from '.';
 import { urlAtom } from '$utils/params-location-atom/url';
-import { EXPLORATION_PATH } from '$utils/routes';
+import { DATASETS_PATH, 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
  *
@@ -62,6 +63,12 @@ export default function ExplorationAndAnalysisContainer() {
         <DatasetSelectorModal
           revealed={datasetModalRevealed}
           close={closeModal}
+          datasets={allExploreDatasets}
+          datasetPathName={DATASETS_PATH}
+          linkProperties={{
+            LinkElement: SmartLink,
+            pathAttributeKeyName: 'to'
+          }}
         />
       </PageMainContent>
     </TourProvider>
diff --git a/app/scripts/components/stories/hub/hub-content.tsx b/app/scripts/components/stories/hub/hub-content.tsx
index a459c2e8d..5266d7da4 100644
--- a/app/scripts/components/stories/hub/hub-content.tsx
+++ b/app/scripts/components/stories/hub/hub-content.tsx
@@ -20,12 +20,8 @@ import {
   FoldTitle
 } from '$components/common/fold';
 import { useSlidingStickyHeaderProps } from '$components/common/layout-root/useSlidingStickyHeaderProps';
-import { Card, LinkProperties } from '$components/common/card';
-import {
-  CardListGrid,
-  CardMeta,
-  CardTopicsList
-} from '$components/common/card/styles';
+import { Card } from '$components/common/card';
+import { CardListGrid, CardMeta, CardTopicsList } from '$components/common/card/styles';
 import EmptyHub from '$components/common/empty-hub';
 import { prepareDatasets } from '$components/common/catalog/prepare-datasets';
 
@@ -40,7 +36,7 @@ import {
   TAXONOMY_TOPICS
 } from '$utils/veda-data/taxonomies';
 import { generateTaxonomies } from '$utils/veda-data/taxonomies';
-import { StoryData } from '$types/veda';
+import { StoryData, LinkProperties } from '$types/veda';
 import { UseFiltersWithQueryResult } from '$components/common/catalog/controls/hooks/use-filters-with-query';
 
 const StoryCount = styled(Subtitle)`
diff --git a/app/scripts/types/veda.ts b/app/scripts/types/veda.ts
index ec3d1f663..44c7e3ead 100644
--- a/app/scripts/types/veda.ts
+++ b/app/scripts/types/veda.ts
@@ -1,7 +1,7 @@
 import * as dateFns from 'date-fns';
 import mapboxgl from 'mapbox-gl';
 import { MDXModule } from 'mdx/types';
-
+import { MouseEventHandler, ComponentType } from 'react';
 // ///////////////////////////////////////////////////////////////////////////
 //  Datasets                                                                //
 // ///////////////////////////////////////////////////////////////////////////
@@ -280,3 +280,11 @@ export interface EnhancedDatasetLayer extends DatasetLayer {
 export interface DatasetDataWithEnhancedLayers extends DatasetData {
   layers: EnhancedDatasetLayer[];
 }
+
+// Types needed for library
+
+export interface LinkProperties {
+  LinkElement: string | ComponentType<any> | undefined;
+  pathAttributeKeyName: string;
+  onLinkClick?: MouseEventHandler;
+}
\ No newline at end of file

From 0c080489ed567e0f5aace08e81e05844343428d5 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Wed, 23 Oct 2024 15:30:26 -0400
Subject: [PATCH 15/38] Put onClick props directly

---
 app/scripts/components/common/card/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
index 7692ba37e..623c8f616 100644
--- a/app/scripts/components/common/card/index.tsx
+++ b/app/scripts/components/common/card/index.tsx
@@ -233,6 +233,7 @@ export function ExternalLinkFlag() {
 
 export interface LinkWithPathProperties extends LinkProperties {
   linkTo: string;
+  isLinkExternal?: boolean;
 }
 
 export interface CardComponentBaseProps {
@@ -306,14 +307,14 @@ function CardComponent(props: CardComponentPropsType) {
     };
   }
 
-  const isExternalLink = /^https?:\/\//.test(linkProperties.linkTo);
-
+  const isExternalLink = linkProperties.isLinkExternal ?? /^https?:\/\//.test(linkProperties.linkTo);
   return (
     <ElementInteractive
       linkProps={{
         as: linkProperties.LinkElement,
         [linkProperties.pathAttributeKeyName]: linkProperties.linkTo,
-        onLinkClick: linkProperties.onLinkClick
+        onClick: linkProperties.onLinkClick,
+        isLinkExternal: isExternalLink
       }}
       as={CardItem}
       cardType={cardType}

From db9e3c174d5673c7039c4eb29e33d37f7b4f8e86 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Thu, 24 Oct 2024 13:27:17 -0400
Subject: [PATCH 16/38] Consolidate onLinkClick and onClick into onClick

---
 app/scripts/components/common/card/index.tsx             | 9 +++++----
 app/scripts/components/common/catalog/catalog-card.tsx   | 6 +-----
 app/scripts/components/common/smart-link.tsx             | 9 +++++----
 .../components/dataset-selector-modal/index.tsx          | 2 +-
 app/scripts/types/veda.ts                                | 2 +-
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
index 623c8f616..0b0ea7546 100644
--- a/app/scripts/components/common/card/index.tsx
+++ b/app/scripts/components/common/card/index.tsx
@@ -257,7 +257,8 @@ export interface CardComponentBaseProps {
 // Specifically: https://github.com/US-GHG-Center/veda-config-ghg/blob/develop/custom-pages/news-and-events/component.tsx#L108
 export interface CardComponentPropsDeprecated extends CardComponentBaseProps {
   linkTo: string;
-  onLinkClick?: MouseEventHandler;
+  onClick?: MouseEventHandler;
+  isLinkExternal?: boolean; // @TODO-SANDRA: Why does this overlap with LinkWithPathProperties
 }
 export interface CardComponentProps extends CardComponentBaseProps {
   linkProperties: LinkWithPathProperties;
@@ -298,10 +299,10 @@ function CardComponent(props: CardComponentPropsType) {
     const { linkProperties: linkPropertiesProps } = props;
     linkProperties = linkPropertiesProps;
   } else {
-    const { linkTo, onLinkClick } = props;
+    const { linkTo, onClick, isLinkExternal } = props;
     linkProperties = {
       linkTo,
-      onLinkClick,
+      onClick,
       pathAttributeKeyName: 'to',
       LinkElement: SmartLink
     };
@@ -313,7 +314,7 @@ function CardComponent(props: CardComponentPropsType) {
       linkProps={{
         as: linkProperties.LinkElement,
         [linkProperties.pathAttributeKeyName]: linkProperties.linkTo,
-        onClick: linkProperties.onLinkClick,
+        onClick: linkProperties.onClick,
         isLinkExternal: isExternalLink
       }}
       as={CardItem}
diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx
index d4a580bb5..10045635f 100644
--- a/app/scripts/components/common/catalog/catalog-card.tsx
+++ b/app/scripts/components/common/catalog/catalog-card.tsx
@@ -170,11 +170,7 @@ export const CatalogCard = (props: CatalogCardProps) => {
           ) : null}
         </>
       }
-      linkProperties={{
-        ...linkProperties,
-        linkTo: linkTo,
-        onLinkClick: handleClick
-      }}
+      linkProperties={{...linkProperties, linkTo: linkTo, onClick: handleClick}}
     />
   );
 };
diff --git a/app/scripts/components/common/smart-link.tsx b/app/scripts/components/common/smart-link.tsx
index 62c2d61f8..e6cf6f089 100644
--- a/app/scripts/components/common/smart-link.tsx
+++ b/app/scripts/components/common/smart-link.tsx
@@ -5,7 +5,8 @@ import { getLinkProps } from '$utils/url';
 
 interface SmartLinkProps {
   to: string;
-  onLinkClick?: ()=> void;
+  isLinkExternal?: boolean;
+  onClick?: ()=> void;
   children?: ReactNode;
 }
 
@@ -13,9 +14,9 @@ interface SmartLinkProps {
  * Switches between a `a` and a `Link` depending on the url.
  */
 export default function SmartLink(props: SmartLinkProps) {
-  const { to, onLinkClick, children, ...rest } = props;
-  const isExternalLink = /^https?:\/\//.test(to);
-  const linkProps = getLinkProps(to, undefined, onLinkClick);
+  const { to, isLinkExternal, onClick, children, ...rest } = props;
+  const isExternalLink = isLinkExternal ?? /^https?:\/\//.test(to);
+  const linkProps = getLinkProps(to, isLinkExternal, undefined, onClick);
 
   return isExternalLink ? (
     <a {...linkProps} {...rest}> {children} </a>
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 138b5fdac..cc7bf02bd 100644
--- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
+++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
@@ -12,7 +12,7 @@ import { timelineDatasetsAtom } from '../../atoms/datasets';
 import {
   reconcileDatasets
 } from '../../data-utils-no-faux-module';
-import {   datasetLayers } from '../../data-utils';
+import { datasetLayers } from '../../data-utils';
 import RenderModalHeader from './header';
 import ModalFooterRender from './footer';
 import CatalogContent from '$components/common/catalog/catalog-content';
diff --git a/app/scripts/types/veda.ts b/app/scripts/types/veda.ts
index 44c7e3ead..2c929e5ec 100644
--- a/app/scripts/types/veda.ts
+++ b/app/scripts/types/veda.ts
@@ -286,5 +286,5 @@ export interface DatasetDataWithEnhancedLayers extends DatasetData {
 export interface LinkProperties {
   LinkElement: string | ComponentType<any> | undefined;
   pathAttributeKeyName: string;
-  onLinkClick?: MouseEventHandler;
+  onClick?: MouseEventHandler;
 }
\ No newline at end of file

From 103b3f6803c0efca9ccf7c4208f9df08faf18368 Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Tue, 29 Oct 2024 09:51:25 +0100
Subject: [PATCH 17/38] Revert fix attempt

---
 .../common/map/controls/hooks/use-themed-control.tsx  | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx b/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
index d6508c393..925e8d1b6 100644
--- a/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
+++ b/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
@@ -38,27 +38,20 @@ export default function useThemedControl(
           rootRef.current = null;
         }
 
-        elementRef.current = null;
       }, 1);
     }
   }
 
   // Listen for changes in dependencies and re-render if necessary
   useEffect(() => {
-    let isMounted = true;
-
-    if (rootRef.current && elementRef.current && isMounted) {
+    if (rootRef.current) {
       rootRef.current.render(
         <ThemeProvider theme={theme}>{renderFn() as any}</ThemeProvider>
       );
     }
-
-    return () => {
-      isMounted = false;
-    };
   }, [renderFn, theme]);
 
   useControl(() => new ThemedControl(), opts);
 
   return null;
-}
+}
\ No newline at end of file

From 20ac2a9de903b76f977873aeadc859dc35d10b0e Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Tue, 29 Oct 2024 13:44:42 +0100
Subject: [PATCH 18/38] Fix imports

---
 app/scripts/components/common/card/index.tsx       |  2 +-
 .../map/style-generators/vector-timeseries.tsx     |  4 +++-
 app/scripts/components/common/page-footer.js       |  2 +-
 app/scripts/components/common/page-hero.tsx        |  4 ++--
 app/scripts/components/common/pub-date.tsx         |  2 +-
 app/scripts/components/exploration/atoms/hooks.ts  |  3 ++-
 .../exploration/components/chart-popover.tsx       |  4 ++--
 .../exploration/components/datasets/block-utils.ts | 14 ++++++--------
 .../components/datasets/dataset-list-item.tsx      |  4 +++-
 .../components/timeline/timeline-head.tsx          |  4 +++-
 .../exploration/components/timeline/timeline.tsx   | 13 +++++--------
 app/scripts/components/exploration/data-utils.ts   | 12 +++++-------
 .../components/exploration/hooks/scales-hooks.ts   |  2 +-
 app/scripts/utils/date.ts                          | 14 ++++++--------
 14 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
index 0b0ea7546..4b616d55c 100644
--- a/app/scripts/components/common/card/index.tsx
+++ b/app/scripts/components/common/card/index.tsx
@@ -1,6 +1,6 @@
 import React, { lazy, MouseEventHandler } from 'react';
 import styled, { css } from 'styled-components';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import { CollecticonExpandTopRight } from '@devseed-ui/collecticons';
 import {
   glsp,
diff --git a/app/scripts/components/common/map/style-generators/vector-timeseries.tsx b/app/scripts/components/common/map/style-generators/vector-timeseries.tsx
index a558ffbbf..cd2973f1e 100644
--- a/app/scripts/components/common/map/style-generators/vector-timeseries.tsx
+++ b/app/scripts/components/common/map/style-generators/vector-timeseries.tsx
@@ -6,7 +6,9 @@ import {
   VectorSourceImpl
 } from 'mapbox-gl';
 import { useTheme } from 'styled-components';
-import { endOfDay, startOfDay } from 'date-fns';
+import endOfDay from 'date-fns/endOfDay';
+import startOfDay from 'date-fns/startOfDay';
+
 import centroid from '@turf/centroid';
 import { LngLatLike } from 'react-map-gl';
 import { Feature } from 'geojson';
diff --git a/app/scripts/components/common/page-footer.js b/app/scripts/components/common/page-footer.js
index 33a01905c..531054103 100644
--- a/app/scripts/components/common/page-footer.js
+++ b/app/scripts/components/common/page-footer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 import {
   glsp,
diff --git a/app/scripts/components/common/page-hero.tsx b/app/scripts/components/common/page-hero.tsx
index 78569b760..1612a9117 100644
--- a/app/scripts/components/common/page-hero.tsx
+++ b/app/scripts/components/common/page-hero.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import styled, { css } from 'styled-components';
 
 import {
@@ -67,7 +67,7 @@ const PageHeroInner = styled(Constrainer)`
   padding-top: ${variableGlsp(4)};
   padding-bottom: ${variableGlsp(2)};
   align-items: end;
-  
+
   /** The constrainer's padding was going over the imagine attribution icon
   * causing it not to work. We remove the pointer events from it and add them
   * again to the descendants. */
diff --git a/app/scripts/components/common/pub-date.tsx b/app/scripts/components/common/pub-date.tsx
index da63dd0bd..59988516c 100644
--- a/app/scripts/components/common/pub-date.tsx
+++ b/app/scripts/components/common/pub-date.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 function PublishedDate(props: { date: Date }) {
   const { date } = props;
diff --git a/app/scripts/components/exploration/atoms/hooks.ts b/app/scripts/components/exploration/atoms/hooks.ts
index 93ea7f5d1..f6ff462c1 100644
--- a/app/scripts/components/exploration/atoms/hooks.ts
+++ b/app/scripts/components/exploration/atoms/hooks.ts
@@ -3,7 +3,8 @@ import { extent } from 'd3';
 import { PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from 'jotai';
 
 import { focusAtom } from 'jotai-optics';
-import { add, max } from 'date-fns';
+import add from 'date-fns/add';
+import max from 'date-fns/max';
 
 import { DAY_SIZE_MAX } from '../constants';
 import {
diff --git a/app/scripts/components/exploration/components/chart-popover.tsx b/app/scripts/components/exploration/components/chart-popover.tsx
index ed869c6b3..fcb29450b 100644
--- a/app/scripts/components/exploration/components/chart-popover.tsx
+++ b/app/scripts/components/exploration/components/chart-popover.tsx
@@ -6,7 +6,7 @@ import React, {
   useMemo
 } from 'react';
 import { createPortal } from 'react-dom';
-import styled, {css} from 'styled-components';
+import styled, { css } from 'styled-components';
 import {
   useFloating,
   autoUpdate,
@@ -15,7 +15,7 @@ import {
   shift
 } from '@floating-ui/react';
 import { bisector, ScaleTime, sort } from 'd3';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 
 import { AnalysisTimeseriesEntry, TimeDensity, TimelineDatasetSuccess } from '../types.d.ts';
diff --git a/app/scripts/components/exploration/components/datasets/block-utils.ts b/app/scripts/components/exploration/components/datasets/block-utils.ts
index 7325ad9e4..cb6085eea 100644
--- a/app/scripts/components/exploration/components/datasets/block-utils.ts
+++ b/app/scripts/components/exploration/components/datasets/block-utils.ts
@@ -1,11 +1,9 @@
-import {
-  endOfDay,
-  endOfMonth,
-  endOfYear,
-  startOfDay,
-  startOfMonth,
-  startOfYear,
-} from 'date-fns';
+import endOfDay from 'date-fns/endOfDay';
+import endOfMonth from 'date-fns/endOfMonth';
+import endOfYear from 'date-fns/endOfYear';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import startOfYear from 'date-fns/startOfYear';
 import { TimeDensity } from '$components/exploration/types.d.ts';
 
 /**
diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
index a80792c32..18b2a0ea8 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
@@ -2,7 +2,9 @@ import React, { useCallback, useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { Reorder, useDragControls } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
-import { addDays, subDays, areIntervalsOverlapping } from 'date-fns';
+import addDays from 'date-fns/addDays';
+import subDays from 'date-fns/subDays';
+import areIntervalsOverlapping from 'date-fns/areIntervalsOverlapping';
 import { useQueryClient } from '@tanstack/react-query';
 import { ScaleTime } from 'd3';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
diff --git a/app/scripts/components/exploration/components/timeline/timeline-head.tsx b/app/scripts/components/exploration/components/timeline/timeline-head.tsx
index 1134f7ee8..870cb8cf8 100644
--- a/app/scripts/components/exploration/components/timeline/timeline-head.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline-head.tsx
@@ -1,7 +1,9 @@
 import React, { forwardRef, useEffect, useRef } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { drag, ScaleTime, select } from 'd3';
-import { clamp, format, startOfDay } from 'date-fns';
+import clamp from 'date-fns/clamp';
+import format from 'date-fns/format';
+import startOfDay from 'date-fns/startOfDay';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 
 import { TIMELINE_PLAYHEAD_COLOR_LABEL, TIMELINE_PLAYHEAD_COLOR_PRIMARY, TIMELINE_PLAYHEAD_COLOR_SECONDARY, TIMELINE_PLAYHEAD_COLOR_TEXT } from './timeline-controls';
diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx
index b47798e52..8dd73d8cf 100644
--- a/app/scripts/components/exploration/components/timeline/timeline.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline.tsx
@@ -6,14 +6,11 @@ import {
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import { Heading } from '@devseed-ui/typography';
 import { select, zoom } from 'd3';
-import {
-  add,
-  isAfter,
-  isBefore,
-  isWithinInterval,
-  max,
-  sub
-} from 'date-fns';
+import add from 'date-fns/add';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import max from 'date-fns/max';
+import sub from 'date-fns/sub';
 import startOfDay from 'date-fns/startOfDay';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import React, {
diff --git a/app/scripts/components/exploration/data-utils.ts b/app/scripts/components/exploration/data-utils.ts
index 845eeefa8..87935c4b4 100644
--- a/app/scripts/components/exploration/data-utils.ts
+++ b/app/scripts/components/exploration/data-utils.ts
@@ -1,10 +1,8 @@
-import {
-  eachDayOfInterval,
-  eachYearOfInterval,
-  format,
-  startOfDay,
-  startOfYear
-} from 'date-fns';
+import eachDayOfInterval from 'date-fns/eachDayOfInterval';
+import eachYearOfInterval from 'date-fns/eachYearOfInterval';
+import format from 'date-fns/format';
+import startOfDay from 'date-fns/startOfDay';
+import startOfYear from 'date-fns/startOfYear';
 import startOfMonth from 'date-fns/startOfMonth';
 import eachMonthOfInterval from 'date-fns/eachMonthOfInterval';
 import {
diff --git a/app/scripts/components/exploration/hooks/scales-hooks.ts b/app/scripts/components/exploration/hooks/scales-hooks.ts
index 31811cb3d..55dc25531 100644
--- a/app/scripts/components/exploration/hooks/scales-hooks.ts
+++ b/app/scripts/components/exploration/hooks/scales-hooks.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { scaleTime } from 'd3';
 import { useAtomValue } from 'jotai';
-import { differenceInCalendarDays } from 'date-fns';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
 
 import { timelineSizesAtom, zoomTransformAtom } from '../atoms/timeline';
 import { DAY_SIZE_MAX } from '../constants';
diff --git a/app/scripts/utils/date.ts b/app/scripts/utils/date.ts
index 1ff91fac0..a41bd8c01 100644
--- a/app/scripts/utils/date.ts
+++ b/app/scripts/utils/date.ts
@@ -1,11 +1,9 @@
-import {
-  format,
-  isSameMonth,
-  isSameYear,
-  parse,
-  startOfYear,
-  sub
-} from 'date-fns';
+import format from 'date-fns/format';
+import isSameMonth from 'date-fns/isSameMonth';
+import isSameYear from 'date-fns/isSameYear';
+import parse from 'date-fns/parse';
+import startOfYear from 'date-fns/startOfYear';
+import sub from 'date-fns/sub';
 
 /**
  * Create a date which matches the input date offsetting the timezone to match

From 165906e703706472eb5a83ced96845dd8bd0565d Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Tue, 29 Oct 2024 14:13:08 +0100
Subject: [PATCH 19/38] Add missing import

---
 .../components/exploration/components/timeline/timeline.tsx      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx
index 8dd73d8cf..8655f34bb 100644
--- a/app/scripts/components/exploration/components/timeline/timeline.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline.tsx
@@ -12,6 +12,7 @@ import isBefore from 'date-fns/isBefore';
 import max from 'date-fns/max';
 import sub from 'date-fns/sub';
 import startOfDay from 'date-fns/startOfDay';
+import isWithinInterval from 'date-fns/isWithinInterval';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import React, {
   useCallback,

From 6d6047e50dc1a83a2918ac717dc6bb516b0eb955 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Wed, 30 Oct 2024 11:52:50 -0400
Subject: [PATCH 20/38] Export useAtom, Remove any react router related
 components

---
 .../dataset-selector-modal/index.tsx          | 22 ++++++++-----
 .../components/datasets/dataset-list-item.tsx |  5 ++-
 .../components/datasets/dataset-list.tsx      |  5 ++-
 .../components/layer-info-modal.tsx           | 13 +++++---
 .../components/parent-dataset-link.tsx        | 33 -------------------
 .../components/timeline/timeline.tsx          |  7 ++--
 .../components/exploration/container.tsx      | 28 +++++++++++-----
 .../exploration/data-utils-no-faux-module.ts  | 10 ++++++
 .../hooks/use-timeline-dataset-atom.tsx       | 11 +++++++
 app/scripts/components/exploration/index.tsx  |  5 ++-
 app/scripts/index.ts                          |  6 ++--
 11 files changed, 84 insertions(+), 61 deletions(-)
 delete mode 100644 app/scripts/components/exploration/components/parent-dataset-link.tsx
 create mode 100644 app/scripts/components/exploration/hooks/use-timeline-dataset-atom.tsx

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 cc7bf02bd..6ba6cd34b 100644
--- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
+++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { useAtom } from 'jotai';
 import {
   Modal,
   ModalBody,
@@ -8,16 +7,18 @@ import {
   ModalHeader
 } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
-import { timelineDatasetsAtom } from '../../atoms/datasets';
 import {
-  reconcileDatasets
+  reconcileDatasets,
+  getLayersFromDataset
 } from '../../data-utils-no-faux-module';
-import { datasetLayers } from '../../data-utils';
+import { TimelineDataset } from '../../types.d.ts';
+
 import RenderModalHeader from './header';
 import ModalFooterRender from './footer';
 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';
 
 const DatasetModal = styled(Modal)`
@@ -68,16 +69,20 @@ interface DatasetSelectorModalProps {
   linkProperties: LinkProperties;
   datasets: DatasetData[];
   datasetPathName: string;
+  timelineDatasets: TimelineDataset[];
+  setTimelineDatasets: (datasets: TimelineDataset[]) => void;
 }
 
 export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
-  const { revealed, linkProperties, datasets, datasetPathName, close } = props;
+  const { revealed, linkProperties, datasets, datasetPathName, timelineDatasets, setTimelineDatasets, close } = props;
   const { LinkElement , pathAttributeKeyName } = linkProperties as { LinkElement: React.ElementType, pathAttributeKeyName: string };
 
-  const [timelineDatasets, setTimelineDatasets] = useAtom(timelineDatasetsAtom);
+  const datasetLayers = getLayersFromDataset(datasets);
+
   const [selectedIds, setSelectedIds] = useState<string[]>(
     timelineDatasets.map((dataset) => dataset.data.id)
   );
+  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();
@@ -95,11 +100,12 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
 
   const onConfirm = useCallback(() => {
     setTimelineDatasets(
-      reconcileDatasets(selectedIds, datasetLayers, timelineDatasets)
+      reconcileDatasets(selectedIds, enhancedDatasetLayers, timelineDatasets)
     );
     onAction(FilterActions.CLEAR);
     close();
-  }, [close, selectedIds, timelineDatasets, setTimelineDatasets, onAction]);
+  }, [close, selectedIds, timelineDatasets, enhancedDatasetLayers, setTimelineDatasets, onAction]);
+
   const linkElementProps = {[pathAttributeKeyName]: datasetPathName};
   return (
     <DatasetModal
diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
index 18b2a0ea8..d6be9e643 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
@@ -41,6 +41,7 @@ import {
   useAnalysisController,
   useAnalysisDataRequest
 } from '$components/exploration/hooks/use-analysis-data-request';
+import { LinkProperties } from '$types/veda';
 
 const DatasetItem = styled.article`
   width: 100%;
@@ -93,10 +94,11 @@ interface DatasetListItemProps {
   xScaled?: ScaleTime<number, number>;
   onDragStart?: () => void;
   onDragEnd?: () => void;
+  linkProperties: LinkProperties;
 }
 
 export function DatasetListItem(props: DatasetListItemProps) {
-  const { datasetId, width, xScaled, onDragStart, onDragEnd } = props;
+  const { datasetId, width, xScaled, linkProperties, onDragStart, onDragEnd } = props;
 
   const datasetAtom = useTimelineDatasetAtom(datasetId);
   const dataset = useAtomValue(datasetAtom);
@@ -218,6 +220,7 @@ export function DatasetListItem(props: DatasetListItemProps) {
                 revealed={!!modalLayerInfo}
                 close={() => setModalLayerInfo(undefined)}
                 layerData={modalLayerInfo}
+                linkProperties={linkProperties}
               />
             )}
           </DatasetHeaderInner>
diff --git a/app/scripts/components/exploration/components/datasets/dataset-list.tsx b/app/scripts/components/exploration/components/datasets/dataset-list.tsx
index b0c7b538d..a8e688380 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-list.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-list.tsx
@@ -7,6 +7,7 @@ import { listReset } from '@devseed-ui/theme-provider';
 
 import { DatasetListItem } from './dataset-list-item';
 import { timelineDatasetsAtom } from '$components/exploration/atoms/datasets';
+import { LinkProperties } from '$types/veda';
 
 const DatasetListSelf = styled.ul`
   ${listReset()}
@@ -16,10 +17,11 @@ const DatasetListSelf = styled.ul`
 interface DatasetListProps {
   width: number;
   xScaled?: ScaleTime<number, number>;
+  linkProperties: LinkProperties;
 }
 
 export function DatasetList(props: DatasetListProps) {
-  const { width, xScaled } = props;
+  const { width, xScaled, linkProperties } = props;
   const [isDragging, setIsDragging] = useState(false);
 
   const [datasets, setDatasets] = useAtom(timelineDatasetsAtom);
@@ -35,6 +37,7 @@ export function DatasetList(props: DatasetListProps) {
       {datasets.map((dataset) => (
         <DatasetListItem
           key={dataset.data.id}
+          linkProperties={linkProperties}
           datasetId={dataset.data.id}
           width={width}
           xScaled={xScaled}
diff --git a/app/scripts/components/exploration/components/layer-info-modal.tsx b/app/scripts/components/exploration/components/layer-info-modal.tsx
index e920c4905..681c78e78 100644
--- a/app/scripts/components/exploration/components/layer-info-modal.tsx
+++ b/app/scripts/components/exploration/components/layer-info-modal.tsx
@@ -12,10 +12,10 @@ import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import { createButtonStyles } from '@devseed-ui/button';
 import { LayerInfo } from 'veda';
 
-import SmartLink from '$components/common/smart-link';
 import { getDatasetPath } from '$utils/routes';
 import { CollecticonDatasetLayers } from '$components/common/icons/dataset-layers';
 import { ParentDatasetTitle } from '$components/common/catalog/catalog-content';
+import { LinkProperties } from '$types/veda';
 
 const DatasetModal = styled(Modal)`
   z-index: ${themeVal('zIndices.modal')};
@@ -54,7 +54,8 @@ const ParentDatasetHeading = styled.h2`
   padding: ${glsp(0.5)} 0;
 `;
 
-const ButtonStyleLink = styled(SmartLink)<any>`
+// override with 'as' as LinkComponent
+const ButtonStyleLink = styled.a<any>`
   &&& {
     ${({ variation, size }) => createButtonStyles({ variation, size })}
   }
@@ -74,7 +75,8 @@ export interface LayerInfoModalData {
 interface LayerInfoModalProps {
   revealed: boolean;
   close: () => void;
-  layerData: LayerInfoModalData
+  layerData: LayerInfoModalData,
+  linkProperties: LinkProperties;
 }
 
 export function LayerInfoLiner(props: { info: LayerInfo }) {
@@ -100,7 +102,8 @@ const LayerInfoLinerModal = styled.div`
 `;
 
 export default function LayerInfoModal(props: LayerInfoModalProps) {
-  const { revealed, close, layerData } = props;
+  const { revealed, close, layerData, linkProperties } = props;
+  const { LinkElement, pathAttributeKeyName } = linkProperties;
   const { parentData } = layerData;
   const dataCatalogPage = getDatasetPath(parentData.id);
   return (
@@ -132,7 +135,7 @@ export default function LayerInfoModal(props: LayerInfoModalProps) {
         <div dangerouslySetInnerHTML={{__html: parentData.infoDescription?? 'Currently, we are unable to display the layer information, but you can find it in the data catalog.' }} />
       }
       footerContent={
-        <ButtonStyleLink to={dataCatalogPage} onClick={close} variation='primary-fill' size='medium' target='_blank'>
+        <ButtonStyleLink as={LinkElement} {...{[pathAttributeKeyName]: dataCatalogPage }} onClick={close} variation='primary-fill' size='medium' target='_blank'>
           Open in Data Catalog
         </ButtonStyleLink>
       }
diff --git a/app/scripts/components/exploration/components/parent-dataset-link.tsx b/app/scripts/components/exploration/components/parent-dataset-link.tsx
deleted file mode 100644
index 0764b7674..000000000
--- a/app/scripts/components/exploration/components/parent-dataset-link.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { themeVal } from '@devseed-ui/theme-provider';
-import { Link } from 'react-router-dom';
-import { CollecticonDatasetLayers } from '$components/common/icons/dataset-layers';
-import { ParentDatset } from '$components/exploration/types.d.ts';
-import { getDatasetPath } from '$utils/routes';
-
-const DatasetLink = styled(Link)<{size: string}>`
-  color: ${themeVal('color.link')};
-  text-align: left;
-  text-transform: none;
-  font-size: ${(props => props.size=='small'? '0.75rem': '1rem')};
-  line-height: 0.75rem;
-  font-weight: normal;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  gap: 0.1rem;
-  > svg {
-    fill: ${themeVal('color.link')};
-  }
-`;
-
-export default function ParentDatasetLink(props: { parentDataset: ParentDatset, size: string}) {
-  const { parentDataset, size } = props;
-  const linkTo = getDatasetPath(parentDataset.id);
-  return (
-  <DatasetLink to={linkTo} size={size}>
-    <CollecticonDatasetLayers /> {parentDataset.name}
-  </DatasetLink>);
-}
\ No newline at end of file
diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx
index 8655f34bb..63f8118d2 100644
--- a/app/scripts/components/exploration/components/timeline/timeline.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline.tsx
@@ -69,6 +69,7 @@ import { useAnalysisController } from '$components/exploration/hooks/use-analysi
 import useAois from '$components/common/map/controls/hooks/use-aois';
 import Pluralize from '$utils/pluralize';
 import { getLowestCommonTimeDensity } from '$components/exploration/data-utils-no-faux-module';
+import { LinkProperties } from '$types/veda';
 
 const TimelineWrapper = styled.div`
   position: relative;
@@ -170,6 +171,7 @@ interface TimelineProps {
   setSelectedCompareDay: (d: Date | null) => void;
   onDatasetAddClick?: () => void;
   panelHeight: number;
+  linkProperties: LinkProperties;
 }
 
 const getIntervalFromDate = (selectedDay: Date, dataDomain: [Date, Date]) => {
@@ -200,7 +202,8 @@ export default function Timeline(props: TimelineProps) {
     selectedCompareDay,
     setSelectedCompareDay,
     onDatasetAddClick,
-    panelHeight
+    panelHeight,
+    linkProperties
   } = props;
 
   // Refs for non react based interactions.
@@ -798,7 +801,7 @@ export default function Timeline(props: TimelineProps) {
           ref={datasetsContainerRef}
           panelHeight={panelHeight}
         >
-          <DatasetList width={width} xScaled={xScaled} />
+          <DatasetList width={width} xScaled={xScaled} linkProperties={linkProperties} />
         </TimelineContentInner>
       </TimelineContent>
     </TimelineWrapper>
diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx
index e1afe3753..059d08197 100644
--- a/app/scripts/components/exploration/container.tsx
+++ b/app/scripts/components/exploration/container.tsx
@@ -3,9 +3,10 @@ import { TourProvider } from '@reactour/tour';
 import { DevTools } from 'jotai-devtools';
 import { useAtom } from 'jotai';
 import { PopoverTourComponent, TourManager } from './tour-manager';
-import { timelineDatasetsAtom } from './atoms/datasets';
+
 import { DatasetSelectorModal } from './components/dataset-selector-modal';
-import { allExploreDatasets} from './data-utils';
+import { allExploreDatasets } from './data-utils';
+import useTimelineDatasetAtom from './hooks/use-timeline-dataset-atom';
 import ExplorationAndAnalysis from '.';
 import { urlAtom } from '$utils/params-location-atom/url';
 import { DATASETS_PATH, EXPLORATION_PATH } from '$utils/routes';
@@ -14,6 +15,7 @@ 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
  *
@@ -30,15 +32,15 @@ const tourProviderStyles = {
 };
 
 export default function ExplorationAndAnalysisContainer() {
-  const [datasets, setDatasets] = useAtom(timelineDatasetsAtom);
+  const [timelineDatasets, setTimelineDatasets] = useTimelineDatasetAtom();
+  const [datasetModalRevealed, setDatasetModalRevealed] = useState(
+    !timelineDatasets.length
+  );
+
   // @NOTE: When Exploration page is preloaded (ex. Linked with react-router)
   // atomWithLocation gets initialized outside of Exploration page and returns the previous page's value
   // We check if url Atom actually returns the values for exploration page here.
   const [currentUrl]= useAtom(urlAtom);
-  const [datasetModalRevealed, setDatasetModalRevealed] = useState(
-    !datasets.length
-  );
-
   if(!currentUrl.pathname?.includes(EXPLORATION_PATH)) return null;
 
   const openModal = () => setDatasetModalRevealed(true);
@@ -59,11 +61,21 @@ export default function ExplorationAndAnalysisContainer() {
       <TourManager />
       <PageMainContent>
         <PageHero title='Exploration' isHidden />
-        <ExplorationAndAnalysis datasets={datasets} setDatasets={setDatasets} openDatasetsSelectionModal={openModal} />
+        <ExplorationAndAnalysis
+          linkProperties={{
+            LinkElement: SmartLink,
+            pathAttributeKeyName: 'to'
+          }}
+          datasets={timelineDatasets}
+          setDatasets={setTimelineDatasets}
+          openDatasetsSelectionModal={openModal}
+        />
         <DatasetSelectorModal
           revealed={datasetModalRevealed}
           close={closeModal}
           datasets={allExploreDatasets}
+          timelineDatasets={timelineDatasets}
+          setTimelineDatasets={setTimelineDatasets}
           datasetPathName={DATASETS_PATH}
           linkProperties={{
             LinkElement: SmartLink,
diff --git a/app/scripts/components/exploration/data-utils-no-faux-module.ts b/app/scripts/components/exploration/data-utils-no-faux-module.ts
index bfe0927d4..d279c70c5 100644
--- a/app/scripts/components/exploration/data-utils-no-faux-module.ts
+++ b/app/scripts/components/exploration/data-utils-no-faux-module.ts
@@ -39,6 +39,16 @@ export const getDatasetLayers = (datasets: VedaDatum<DatasetData>) =>
     }));
   });
 
+  export const getLayersFromDataset = (datasets: DatasetData[]) =>
+    Object.values(datasets).map((dataset: DatasetData) => {
+      return dataset!.layers.map((l) => ({
+        ...l,
+        parentDataset: {
+          id: dataset!.id,
+          name: dataset!.name
+        }
+      }));
+    });
 /**
  * Returns an array of metrics based on the given Dataset Layer configuration.
  * If the layer has metrics defined, it returns only the metrics that match the
diff --git a/app/scripts/components/exploration/hooks/use-timeline-dataset-atom.tsx b/app/scripts/components/exploration/hooks/use-timeline-dataset-atom.tsx
new file mode 100644
index 000000000..46811c17d
--- /dev/null
+++ b/app/scripts/components/exploration/hooks/use-timeline-dataset-atom.tsx
@@ -0,0 +1,11 @@
+import { useAtom } from 'jotai';
+import { timelineDatasetsAtom } from '../atoms/datasets';
+import { TimelineDataset } from '../types.d.ts';
+
+export default function useTimelineDatasetAtom (): [
+  TimelineDataset[],
+  (datasets: TimelineDataset[]) => void
+]  {
+  const [datasets, setDatasets] = useAtom(timelineDatasetsAtom);
+  return [datasets, setDatasets];
+}
\ No newline at end of file
diff --git a/app/scripts/components/exploration/index.tsx b/app/scripts/components/exploration/index.tsx
index 5e4242cba..12636ca85 100644
--- a/app/scripts/components/exploration/index.tsx
+++ b/app/scripts/components/exploration/index.tsx
@@ -10,6 +10,7 @@ import { useAnalysisController } from './hooks/use-analysis-data-request';
 import { TimelineDataset } from './types.d.ts';
 import { selectedCompareDateAtom, selectedDateAtom } from './atoms/dates';
 import { CLEAR_LOCATION, urlAtom } from '$utils/params-location-atom/url';
+import { LinkProperties } from '$types/veda';
 
 // @TODO: "height: 100%" Added for exploration container to show correctly in NextJs instance but investigate why this is needed and possibly work to remove
 const Container = styled.div`
@@ -59,10 +60,11 @@ interface ExplorationAndAnalysisProps {
   datasets: TimelineDataset[];
   setDatasets: (datasets: TimelineDataset[]) => void;
   openDatasetsSelectionModal?: () => void;
+  linkProperties: LinkProperties;
 }
 
 function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
-  const { datasets, setDatasets, openDatasetsSelectionModal } = props;
+  const { datasets, setDatasets, linkProperties, openDatasetsSelectionModal } = props;
 
   const [selectedDay, setSelectedDay] = useAtom(selectedDateAtom);
 
@@ -111,6 +113,7 @@ function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
             setSelectedCompareDay={setSelectedCompareDay}
             onDatasetAddClick={openDatasetsSelectionModal}
             panelHeight={panelHeight}
+            linkProperties={linkProperties}
           />
         </Panel>
       </PanelGroup>
diff --git a/app/scripts/index.ts b/app/scripts/index.ts
index f6b152995..8089fdfcd 100644
--- a/app/scripts/index.ts
+++ b/app/scripts/index.ts
@@ -21,6 +21,7 @@ import LogoContainer from '$components/common/page-header/logo-container';
 import type { NavItem, InternalNavLink, NavItemType } from '$components/common/page-header/types';
 
 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';
 
@@ -48,8 +49,9 @@ export {
   LogoContainer,
   ExplorationAndAnalysis,
   DatasetSelectorModal,
-
-  // HOOKS and utility functions
+  
+  // HOOKS
+  useTimelineDatasetAtom,
   useFiltersWithQS,
 
   // TYPES

From a538d20c5acf9d8cbb9a77c47728ea605f3f17c4 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Wed, 30 Oct 2024 12:03:17 -0400
Subject: [PATCH 21/38] Use a when opening a tab in a new window

---
 .../components/datasets/dataset-list-item.tsx          |  5 +----
 .../exploration/components/datasets/dataset-list.tsx   |  5 +----
 .../exploration/components/layer-info-modal.tsx        | 10 ++++------
 .../exploration/components/timeline/timeline.tsx       |  7 ++-----
 app/scripts/components/exploration/container.tsx       |  4 ----
 app/scripts/components/exploration/index.tsx           |  5 +----
 6 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
index d6be9e643..18b2a0ea8 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
@@ -41,7 +41,6 @@ import {
   useAnalysisController,
   useAnalysisDataRequest
 } from '$components/exploration/hooks/use-analysis-data-request';
-import { LinkProperties } from '$types/veda';
 
 const DatasetItem = styled.article`
   width: 100%;
@@ -94,11 +93,10 @@ interface DatasetListItemProps {
   xScaled?: ScaleTime<number, number>;
   onDragStart?: () => void;
   onDragEnd?: () => void;
-  linkProperties: LinkProperties;
 }
 
 export function DatasetListItem(props: DatasetListItemProps) {
-  const { datasetId, width, xScaled, linkProperties, onDragStart, onDragEnd } = props;
+  const { datasetId, width, xScaled, onDragStart, onDragEnd } = props;
 
   const datasetAtom = useTimelineDatasetAtom(datasetId);
   const dataset = useAtomValue(datasetAtom);
@@ -220,7 +218,6 @@ export function DatasetListItem(props: DatasetListItemProps) {
                 revealed={!!modalLayerInfo}
                 close={() => setModalLayerInfo(undefined)}
                 layerData={modalLayerInfo}
-                linkProperties={linkProperties}
               />
             )}
           </DatasetHeaderInner>
diff --git a/app/scripts/components/exploration/components/datasets/dataset-list.tsx b/app/scripts/components/exploration/components/datasets/dataset-list.tsx
index a8e688380..b0c7b538d 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-list.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-list.tsx
@@ -7,7 +7,6 @@ import { listReset } from '@devseed-ui/theme-provider';
 
 import { DatasetListItem } from './dataset-list-item';
 import { timelineDatasetsAtom } from '$components/exploration/atoms/datasets';
-import { LinkProperties } from '$types/veda';
 
 const DatasetListSelf = styled.ul`
   ${listReset()}
@@ -17,11 +16,10 @@ const DatasetListSelf = styled.ul`
 interface DatasetListProps {
   width: number;
   xScaled?: ScaleTime<number, number>;
-  linkProperties: LinkProperties;
 }
 
 export function DatasetList(props: DatasetListProps) {
-  const { width, xScaled, linkProperties } = props;
+  const { width, xScaled } = props;
   const [isDragging, setIsDragging] = useState(false);
 
   const [datasets, setDatasets] = useAtom(timelineDatasetsAtom);
@@ -37,7 +35,6 @@ export function DatasetList(props: DatasetListProps) {
       {datasets.map((dataset) => (
         <DatasetListItem
           key={dataset.data.id}
-          linkProperties={linkProperties}
           datasetId={dataset.data.id}
           width={width}
           xScaled={xScaled}
diff --git a/app/scripts/components/exploration/components/layer-info-modal.tsx b/app/scripts/components/exploration/components/layer-info-modal.tsx
index 681c78e78..977bbd254 100644
--- a/app/scripts/components/exploration/components/layer-info-modal.tsx
+++ b/app/scripts/components/exploration/components/layer-info-modal.tsx
@@ -15,7 +15,6 @@ import { LayerInfo } from 'veda';
 import { getDatasetPath } from '$utils/routes';
 import { CollecticonDatasetLayers } from '$components/common/icons/dataset-layers';
 import { ParentDatasetTitle } from '$components/common/catalog/catalog-content';
-import { LinkProperties } from '$types/veda';
 
 const DatasetModal = styled(Modal)`
   z-index: ${themeVal('zIndices.modal')};
@@ -75,8 +74,7 @@ export interface LayerInfoModalData {
 interface LayerInfoModalProps {
   revealed: boolean;
   close: () => void;
-  layerData: LayerInfoModalData,
-  linkProperties: LinkProperties;
+  layerData: LayerInfoModalData
 }
 
 export function LayerInfoLiner(props: { info: LayerInfo }) {
@@ -102,8 +100,8 @@ const LayerInfoLinerModal = styled.div`
 `;
 
 export default function LayerInfoModal(props: LayerInfoModalProps) {
-  const { revealed, close, layerData, linkProperties } = props;
-  const { LinkElement, pathAttributeKeyName } = linkProperties;
+  const { revealed, close, layerData } = props;
+
   const { parentData } = layerData;
   const dataCatalogPage = getDatasetPath(parentData.id);
   return (
@@ -135,7 +133,7 @@ export default function LayerInfoModal(props: LayerInfoModalProps) {
         <div dangerouslySetInnerHTML={{__html: parentData.infoDescription?? 'Currently, we are unable to display the layer information, but you can find it in the data catalog.' }} />
       }
       footerContent={
-        <ButtonStyleLink as={LinkElement} {...{[pathAttributeKeyName]: dataCatalogPage }} onClick={close} variation='primary-fill' size='medium' target='_blank'>
+        <ButtonStyleLink href={dataCatalogPage} rel='noopener noreferrer' onClick={close} variation='primary-fill' size='medium' target='_blank'>
           Open in Data Catalog
         </ButtonStyleLink>
       }
diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx
index 63f8118d2..8655f34bb 100644
--- a/app/scripts/components/exploration/components/timeline/timeline.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline.tsx
@@ -69,7 +69,6 @@ import { useAnalysisController } from '$components/exploration/hooks/use-analysi
 import useAois from '$components/common/map/controls/hooks/use-aois';
 import Pluralize from '$utils/pluralize';
 import { getLowestCommonTimeDensity } from '$components/exploration/data-utils-no-faux-module';
-import { LinkProperties } from '$types/veda';
 
 const TimelineWrapper = styled.div`
   position: relative;
@@ -171,7 +170,6 @@ interface TimelineProps {
   setSelectedCompareDay: (d: Date | null) => void;
   onDatasetAddClick?: () => void;
   panelHeight: number;
-  linkProperties: LinkProperties;
 }
 
 const getIntervalFromDate = (selectedDay: Date, dataDomain: [Date, Date]) => {
@@ -202,8 +200,7 @@ export default function Timeline(props: TimelineProps) {
     selectedCompareDay,
     setSelectedCompareDay,
     onDatasetAddClick,
-    panelHeight,
-    linkProperties
+    panelHeight
   } = props;
 
   // Refs for non react based interactions.
@@ -801,7 +798,7 @@ export default function Timeline(props: TimelineProps) {
           ref={datasetsContainerRef}
           panelHeight={panelHeight}
         >
-          <DatasetList width={width} xScaled={xScaled} linkProperties={linkProperties} />
+          <DatasetList width={width} xScaled={xScaled} />
         </TimelineContentInner>
       </TimelineContent>
     </TimelineWrapper>
diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx
index 059d08197..434dcd457 100644
--- a/app/scripts/components/exploration/container.tsx
+++ b/app/scripts/components/exploration/container.tsx
@@ -62,10 +62,6 @@ export default function ExplorationAndAnalysisContainer() {
       <PageMainContent>
         <PageHero title='Exploration' isHidden />
         <ExplorationAndAnalysis
-          linkProperties={{
-            LinkElement: SmartLink,
-            pathAttributeKeyName: 'to'
-          }}
           datasets={timelineDatasets}
           setDatasets={setTimelineDatasets}
           openDatasetsSelectionModal={openModal}
diff --git a/app/scripts/components/exploration/index.tsx b/app/scripts/components/exploration/index.tsx
index 12636ca85..5e4242cba 100644
--- a/app/scripts/components/exploration/index.tsx
+++ b/app/scripts/components/exploration/index.tsx
@@ -10,7 +10,6 @@ import { useAnalysisController } from './hooks/use-analysis-data-request';
 import { TimelineDataset } from './types.d.ts';
 import { selectedCompareDateAtom, selectedDateAtom } from './atoms/dates';
 import { CLEAR_LOCATION, urlAtom } from '$utils/params-location-atom/url';
-import { LinkProperties } from '$types/veda';
 
 // @TODO: "height: 100%" Added for exploration container to show correctly in NextJs instance but investigate why this is needed and possibly work to remove
 const Container = styled.div`
@@ -60,11 +59,10 @@ interface ExplorationAndAnalysisProps {
   datasets: TimelineDataset[];
   setDatasets: (datasets: TimelineDataset[]) => void;
   openDatasetsSelectionModal?: () => void;
-  linkProperties: LinkProperties;
 }
 
 function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
-  const { datasets, setDatasets, linkProperties, openDatasetsSelectionModal } = props;
+  const { datasets, setDatasets, openDatasetsSelectionModal } = props;
 
   const [selectedDay, setSelectedDay] = useAtom(selectedDateAtom);
 
@@ -113,7 +111,6 @@ function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
             setSelectedCompareDay={setSelectedCompareDay}
             onDatasetAddClick={openDatasetsSelectionModal}
             panelHeight={panelHeight}
-            linkProperties={linkProperties}
           />
         </Panel>
       </PanelGroup>

From fb0915930c0b57570ebcdfadca7ba2c67ed84d90 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Wed, 30 Oct 2024 14:15:42 -0400
Subject: [PATCH 22/38] Use linkproperties for sources (but is this necessary?)

---
 app/scripts/components/common/card-sources.tsx   | 16 ++++++++--------
 .../components/common/catalog/catalog-card.tsx   |  2 +-
 .../common/featured-slider-section.tsx           | 10 +++++++---
 .../components/stories/hub/hub-content.tsx       |  5 +++--
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/app/scripts/components/common/card-sources.tsx b/app/scripts/components/common/card-sources.tsx
index d592a1c68..72d47dbd4 100644
--- a/app/scripts/components/common/card-sources.tsx
+++ b/app/scripts/components/common/card-sources.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
 import { listReset } from '@devseed-ui/theme-provider';
-import { TaxonomyItem } from '$types/veda';
+import { LinkProperties, TaxonomyItem } from '$types/veda';
 import { FilterActions } from '$components/common//catalog/utils';
 
 const SourcesUl = styled.ul`
@@ -23,11 +22,12 @@ interface SourcesListProps {
   sources?: TaxonomyItem[];
   onSourceClick?: (v: string) => void;
   rootPath?: string;
+  linkProperties: LinkProperties;
 }
 
 export function CardSourcesList(props: SourcesListProps) {
-  const { sources, onSourceClick, rootPath } = props;
-
+  const { sources, onSourceClick, linkProperties, rootPath } = props;
+  const { LinkElement, pathAttributeKeyName } = linkProperties as { LinkElement: React.ElementType, pathAttributeKeyName: string };
   if (!sources?.length) return null;
 
   // No link rendering
@@ -50,19 +50,19 @@ export function CardSourcesList(props: SourcesListProps) {
       <SourcesUl>
         {sources.map((source) => (
           <li key={source.id}>
-            <Link
-              to={`${rootPath}?${FilterActions.TAXONOMY}=${encodeURIComponent(
+            <LinkElement
+              {...{[pathAttributeKeyName]:`${rootPath}?${FilterActions.TAXONOMY}=${encodeURIComponent(
                 JSON.stringify({
                   Source: source.id
                 })
-              )}`}
+              )}`}}
               onClick={(e) => {
                 e.preventDefault();
                 onSourceClick(source.id);
               }}
             >
               {source.name}
-            </Link>
+            </LinkElement>
           </li>
         ))}
       </SourcesUl>
diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx
index 10045635f..13723bcf0 100644
--- a/app/scripts/components/common/catalog/catalog-card.tsx
+++ b/app/scripts/components/common/catalog/catalog-card.tsx
@@ -133,7 +133,7 @@ export const CatalogCard = (props: CatalogCardProps) => {
       overline={
         <CardMeta>
           <DatasetClassification dataset={dataset} />
-          <CardSourcesList sources={sources} />
+          <CardSourcesList sources={sources} linkProperties={linkProperties} />
         </CardMeta>
       }
       linkLabel='View dataset'
diff --git a/app/scripts/components/common/featured-slider-section.tsx b/app/scripts/components/common/featured-slider-section.tsx
index d4cc0a123..297e675d2 100644
--- a/app/scripts/components/common/featured-slider-section.tsx
+++ b/app/scripts/components/common/featured-slider-section.tsx
@@ -97,7 +97,10 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
               return sortedFeaturedItems.map((d) => {
                 const date = new Date(d[dateProperty ?? '']);
                 const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values;
-
+                const linkProperties = {
+                  pathAttributeKeyName: 'to',
+                  LinkElement: SmartLink
+                };
                 return (
                   <ContinuumGridItem {...bag} key={d.id}>
                     <Card
@@ -112,9 +115,9 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
                       cardType='featured'
                       linkLabel='View more'
                       linkProperties={{
+                        ...linkProperties,
                         linkTo: `${d.asLink?.url ?? getItemPath(d)}`,
-                        pathAttributeKeyName: 'to',
-                        LinkElement: SmartLink
+                        isLinkExternal: d.isLinkExternal
                       }}
                       title={d.name}
                       overline={
@@ -123,6 +126,7 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
                             <DatasetClassification dataset={d} />
                           )}
                           <CardSourcesList
+                            linkProperties={linkProperties}
                             sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values}
                           />
                           <VerticalDivider variation='light' />
diff --git a/app/scripts/components/stories/hub/hub-content.tsx b/app/scripts/components/stories/hub/hub-content.tsx
index 5266d7da4..928f2ed38 100644
--- a/app/scripts/components/stories/hub/hub-content.tsx
+++ b/app/scripts/components/stories/hub/hub-content.tsx
@@ -164,6 +164,7 @@ export default function HubContent(props: HubContentProps) {
                       <CardSourcesList
                         sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values}
                         rootPath={pathname}
+                        linkProperties={linkProperties}
                         onSourceClick={(id) => {
                           onAction(FilterActions.TAXONOMY_MULTISELECT, {
                             key: TAXONOMY_SOURCE,
@@ -181,9 +182,9 @@ export default function HubContent(props: HubContentProps) {
                   }
                   linkLabel='View more'
                   linkProperties={{
+                    ...linkProperties,
                     linkTo: `${d.asLink?.url ?? d.path}`,
-                    LinkElement,
-                    pathAttributeKeyName
+                    isLinkExternal: d.isLinkExternal
                   }}
                   title={
                     <TextHighlight value={search} disabled={search.length < 3}>

From fb269d0640d7b2517d76205efd15392b02c00b35 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Wed, 30 Oct 2024 14:20:50 -0400
Subject: [PATCH 23/38] Flag the problem - 1

---
 .../map/controls/aoi/custom-aoi-control.tsx   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
index 931c3de86..2c0124cb6 100644
--- a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
+++ b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
@@ -86,6 +86,7 @@ function CustomAoI({
   // from feature to point.
   const [, forceUpdate] = useState(0);
   useEffect(() => {
+    if(!map.loaded()) return;
     const mbDraw = map?._drawControl;
     if (!mbDraw) return;
     const aoiSelectedFor = selectedForEditing ? SIMPLE_SELECT : STATIC_MODE;
@@ -220,6 +221,7 @@ function CustomAoI({
     // selected, the trash method doesn't do anything. So, in this case, we
     // trigger the delete for the whole feature.
     const selectedFeatures = mbDraw.getSelected()?.features;
+
     if (
       mbDraw.getMode() === DIRECT_SELECT &&
       selectedFeatures.length &&
@@ -248,9 +250,19 @@ function CustomAoI({
     mbDraw.trash();
   }, [features, aoiDeleteAll, map]);
 
-  const isAreaSelected = !!map?._drawControl?.getSelected().features.length;
-  const isPointSelected =
-    !!map?._drawControl.getSelectedPoints().features.length;
+  const isAreaSelected = false;
+  const isPointSelected = false;
+
+  // try {
+  // @TODO: the function below gets called boefore the store of mapboxdraw is initialized (before being added to map)
+  // isAreaSelected = !!map?._drawControl?.getSelected().features.length;
+  // isPointSelected =
+  //   !!map?._drawControl?.getSelectedPoints()?.features.length;
+  // } catch(e) {
+  //   console.error(e);
+  //   isAreaSelected = false;
+  //   isPointSelected = false;
+  // }
   const hasFeatures = !!features.length;
 
   return (
@@ -337,7 +349,6 @@ export default function CustomAoIControl({
   // as Mapbox Draw handles this internally when the drawing is completed
   useEffect(() => {
     if (!main) return;
-
     const mbDraw = main._drawControl;
 
     if (!mbDraw) return;

From 3d8947689bf99eba19169037d223cd913809392b Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Wed, 30 Oct 2024 14:28:52 -0400
Subject: [PATCH 24/38] Edit date atom (workaround)

---
 app/scripts/components/exploration/atoms/dates.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/scripts/components/exploration/atoms/dates.ts b/app/scripts/components/exploration/atoms/dates.ts
index e79e979a1..6cdf70069 100644
--- a/app/scripts/components/exploration/atoms/dates.ts
+++ b/app/scripts/components/exploration/atoms/dates.ts
@@ -28,8 +28,13 @@ export const selectedDateAtom = atomWithUrlValueStability<Date | null>({
     if (!prev || !next) return prev === next;
     return prev.getTime() === next.getTime();
   },
-  dehydrate: (date) => {
-    return date?.toISOString() ?? '';
+  dehydrate: (d) => {
+    // @TODO: temporary to work around
+    try {
+      return d?.toISOString() ?? '';
+    } catch(e) {
+      return '';
+    }
   }
 });
 

From acafa2e6d45be12c39a51d1cff0d5365327ba3f1 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Wed, 30 Oct 2024 14:51:02 -0400
Subject: [PATCH 25/38] Make a comment where it uses data faux module
 datasetLayers

---
 app/scripts/components/exploration/atoms/datasets.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/scripts/components/exploration/atoms/datasets.ts b/app/scripts/components/exploration/atoms/datasets.ts
index ed9751f07..f78bbb18d 100644
--- a/app/scripts/components/exploration/atoms/datasets.ts
+++ b/app/scripts/components/exploration/atoms/datasets.ts
@@ -51,6 +51,7 @@ export const timelineDatasetsAtom = atomWithUrlValueStability<
       }
       // Reconcile the dataset with the internal data (from VEDA config files)
       // and then add the url stored settings.
+      // @TODO - replace datasetLayers
       const [reconciled] = reconcileDatasets([enc.id], datasetLayers, []);
       if (enc.settings) {
         reconciled.settings = enc.settings;

From 090c256fb6640f2a29468c4121a9a18a5380828e Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Thu, 31 Oct 2024 16:20:06 -0400
Subject: [PATCH 26/38] Put Try Catch block for drawcontrol function

---
 .../map/controls/aoi/custom-aoi-control.tsx   | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
index 2c0124cb6..c1bc1e4a3 100644
--- a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
+++ b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
@@ -250,19 +250,19 @@ function CustomAoI({
     mbDraw.trash();
   }, [features, aoiDeleteAll, map]);
 
-  const isAreaSelected = false;
-  const isPointSelected = false;
-
-  // try {
-  // @TODO: the function below gets called boefore the store of mapboxdraw is initialized (before being added to map)
-  // isAreaSelected = !!map?._drawControl?.getSelected().features.length;
-  // isPointSelected =
-  //   !!map?._drawControl?.getSelectedPoints()?.features.length;
-  // } catch(e) {
-  //   console.error(e);
-  //   isAreaSelected = false;
-  //   isPointSelected = false;
-  // }
+  let isAreaSelected = false;
+  let isPointSelected = false;
+
+  // @NOTE: map?._drawControl?.getSelected() needs access to mapboxgl draw context store,
+  // but the function gets called before mapboxdraw store is initialized (before being added to map) resulting in an error
+  // Wrapping with try block so the values get subbed even when the store is not available
+  try {
+    isAreaSelected = !!(map?._drawControl?.getSelected().features.length);
+    isPointSelected = !!(map?._drawControl?.getSelectedPoints()?.features.length);
+  } catch(e) {
+    isAreaSelected = false;
+    isPointSelected = false;
+  }
   const hasFeatures = !!features.length;
 
   return (

From 86c90c3794a502c1d138d3d8966678cdbb4d358d Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Fri, 1 Nov 2024 08:51:33 -0400
Subject: [PATCH 27/38] Add last array method

---
 app/scripts/index.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/scripts/index.ts b/app/scripts/index.ts
index 8089fdfcd..4e350525f 100644
--- a/app/scripts/index.ts
+++ b/app/scripts/index.ts
@@ -25,6 +25,17 @@ import useTimelineDatasetAtom from '$components/exploration/hooks/use-timeline-d
 import { timelineDatasetsAtom } from '$components/exploration/atoms/datasets';
 import { DatasetSelectorModal } from '$components/exploration/components/dataset-selector-modal';
 
+// Adding .last property to array
+/* eslint-disable-next-line fp/no-mutating-methods */
+Object.defineProperty(Array.prototype, 'last', {
+  enumerable: false,
+  configurable: true,
+  get: function () {
+    return this[this.length - 1];
+  },
+  set: undefined
+});
+
 export {
   // COMPONENTS
   Block,

From 529d6aa2b7b3827c4aecbe6e8ae5dc0a059690ac Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Fri, 1 Nov 2024 14:52:15 -0400
Subject: [PATCH 28/38] Revert temporary work around

---
 app/scripts/components/exploration/atoms/dates.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/scripts/components/exploration/atoms/dates.ts b/app/scripts/components/exploration/atoms/dates.ts
index 6cdf70069..022ebcaeb 100644
--- a/app/scripts/components/exploration/atoms/dates.ts
+++ b/app/scripts/components/exploration/atoms/dates.ts
@@ -29,12 +29,7 @@ export const selectedDateAtom = atomWithUrlValueStability<Date | null>({
     return prev.getTime() === next.getTime();
   },
   dehydrate: (d) => {
-    // @TODO: temporary to work around
-    try {
-      return d?.toISOString() ?? '';
-    } catch(e) {
-      return '';
-    }
+    return d?.toISOString() ?? '';
   }
 });
 

From 6107a3c665ca027b3e96fa80f68f1191d202a78f Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Wed, 6 Nov 2024 10:15:36 -0500
Subject: [PATCH 29/38] Get rid of the line that is not necessary

---
 .../components/common/map/controls/aoi/custom-aoi-control.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
index c1bc1e4a3..9280e5d45 100644
--- a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
+++ b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
@@ -86,7 +86,6 @@ function CustomAoI({
   // from feature to point.
   const [, forceUpdate] = useState(0);
   useEffect(() => {
-    if(!map.loaded()) return;
     const mbDraw = map?._drawControl;
     if (!mbDraw) return;
     const aoiSelectedFor = selectedForEditing ? SIMPLE_SELECT : STATIC_MODE;

From e130a6a692cf0fdc5787a32c726d5865b28b8a37 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 11 Nov 2024 11:42:18 -0500
Subject: [PATCH 30/38] Resolved all conflicts

---
 app/scripts/types/veda.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/scripts/types/veda.ts b/app/scripts/types/veda.ts
index 2c929e5ec..a75e99cf6 100644
--- a/app/scripts/types/veda.ts
+++ b/app/scripts/types/veda.ts
@@ -213,6 +213,7 @@ export interface StoryData {
   related?: RelatedContentData[];
   asLink?: LinkContentData;
   hideExternalLinkBadge?: boolean;
+  isLinkExternal?: boolean;
   isHidden?: boolean;
 }
 

From f23dac908132e3a38eb1ab79b5a6471f660455a9 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 11 Nov 2024 12:08:39 -0500
Subject: [PATCH 31/38] Fix import to fix buildlib error

---
 app/scripts/components/common/page-header/logo-container.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/scripts/components/common/page-header/logo-container.tsx b/app/scripts/components/common/page-header/logo-container.tsx
index 2d7b3f1f3..80cc709c0 100644
--- a/app/scripts/components/common/page-header/logo-container.tsx
+++ b/app/scripts/components/common/page-header/logo-container.tsx
@@ -1,6 +1,6 @@
 import React, { ComponentType } from 'react';
 import { Tip } from '../tip';
-import { LinkProperties } from '../card';
+import { LinkProperties } from '$types/veda';
 import { Brand, PageTitleSecLink } from './logo';
 /**
  * LogoContainer that is meant to integrate in the default page header without the dependencies of the veda virtual modules

From de31403f5fb95768dc2463f60cdf6a4b9f1d5165 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 11 Nov 2024 13:48:39 -0500
Subject: [PATCH 32/38] Add is LinkExternal back that was removed from conflict
 resolution

---
 app/scripts/components/common/card/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
index 4b616d55c..854af7f65 100644
--- a/app/scripts/components/common/card/index.tsx
+++ b/app/scripts/components/common/card/index.tsx
@@ -304,7 +304,8 @@ function CardComponent(props: CardComponentPropsType) {
       linkTo,
       onClick,
       pathAttributeKeyName: 'to',
-      LinkElement: SmartLink
+      LinkElement: SmartLink,
+      isLinkExternal
     };
   }
 

From 4b59fd6994e7cd8ee516f68076c5ad7b079ca118 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 11 Nov 2024 15:45:12 -0500
Subject: [PATCH 33/38] Remove onClick from linkProps, Remove linkProps req
 from card, Fix to have externallinkbadge hotfix changes

---
 .../components/common/card-sources.tsx        |  2 +-
 app/scripts/components/common/card/index.tsx  | 32 ++++++++-----------
 .../common/catalog/catalog-card.tsx           |  5 +--
 .../common/catalog/catalog-content.tsx        |  1 -
 .../components/common/element-interactive.js  | 28 +++++++++-------
 app/scripts/components/common/smart-link.tsx  |  7 ++--
 .../components/stories/hub/hub-content.tsx    |  1 -
 app/scripts/types/veda.ts                     |  1 -
 app/scripts/utils/url.ts                      |  5 +--
 9 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/app/scripts/components/common/card-sources.tsx b/app/scripts/components/common/card-sources.tsx
index 72d47dbd4..9d9cf6cca 100644
--- a/app/scripts/components/common/card-sources.tsx
+++ b/app/scripts/components/common/card-sources.tsx
@@ -22,7 +22,7 @@ interface SourcesListProps {
   sources?: TaxonomyItem[];
   onSourceClick?: (v: string) => void;
   rootPath?: string;
-  linkProperties: LinkProperties;
+  linkProperties?: LinkProperties;
 }
 
 export function CardSourcesList(props: SourcesListProps) {
diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
index 854af7f65..2d1361ea2 100644
--- a/app/scripts/components/common/card/index.tsx
+++ b/app/scripts/components/common/card/index.tsx
@@ -251,17 +251,17 @@ export interface CardComponentBaseProps {
   footerContent?: JSX.Element;
   hideExternalLinkBadge?: boolean;
   onCardClickCapture?: MouseEventHandler;
+  onClick?: MouseEventHandler;
 }
 
 // @TODO: Consolidate these props when the instance adapts the new syntax
 // Specifically: https://github.com/US-GHG-Center/veda-config-ghg/blob/develop/custom-pages/news-and-events/component.tsx#L108
 export interface CardComponentPropsDeprecated extends CardComponentBaseProps {
   linkTo: string;
-  onClick?: MouseEventHandler;
   isLinkExternal?: boolean; // @TODO-SANDRA: Why does this overlap with LinkWithPathProperties
 }
 export interface CardComponentProps extends CardComponentBaseProps {
-  linkProperties: LinkWithPathProperties;
+  linkProperties?: LinkWithPathProperties;
 }
 
 type CardComponentPropsType = CardComponentProps | CardComponentPropsDeprecated;
@@ -288,41 +288,37 @@ function CardComponent(props: CardComponentPropsType) {
     parentTo,
     footerContent,
     hideExternalLinkBadge,
-    onCardClickCapture
+    onCardClickCapture,
+    onClick,
   } = props;
   // @TODO: This process is not necessary once all the instances adapt the linkProperties syntax
   // Consolidate them to use LinkProperties only
-  let linkProperties: LinkWithPathProperties;
+  let linkProperties: LinkWithPathProperties | undefined;
 
   if (hasLinkProperties(props)) {
     // Handle new props with linkProperties
     const { linkProperties: linkPropertiesProps } = props;
     linkProperties = linkPropertiesProps;
   } else {
-    const { linkTo, onClick, isLinkExternal } = props;
-    linkProperties = {
+    const { linkTo } = props;
+    linkProperties = linkTo ? {
       linkTo,
-      onClick,
       pathAttributeKeyName: 'to',
-      LinkElement: SmartLink,
-      isLinkExternal
-    };
+      LinkElement: SmartLink
+    } : undefined;
   }
 
-  const isExternalLink = linkProperties.isLinkExternal ?? /^https?:\/\//.test(linkProperties.linkTo);
+  const isExternalLink = linkProperties ? /^https?:\/\//.test(linkProperties.linkTo) : false;
+
   return (
     <ElementInteractive
-      linkProps={{
-        as: linkProperties.LinkElement,
-        [linkProperties.pathAttributeKeyName]: linkProperties.linkTo,
-        onClick: linkProperties.onClick,
-        isLinkExternal: isExternalLink
-      }}
+      {...(linkProperties ? {linkProps: {as: linkProperties.LinkElement, [linkProperties.pathAttributeKeyName]: linkProperties.linkTo}} : {})}
       as={CardItem}
       cardType={cardType}
       className={className}
       linkLabel={linkLabel ?? 'View more'}
       onClickCapture={onCardClickCapture}
+      onClick={onClick}
     >
       {cardType !== 'horizontal-info' && (
         <>
@@ -338,7 +334,7 @@ function CardComponent(props: CardComponentPropsType) {
                   parentTo &&
                   tagLabels.map((label) => (
                     <CardLabel
-                      as={linkProperties.LinkElement}
+                      as={linkProperties?.LinkElement}
                       to={parentTo}
                       key={label}
                     >
diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx
index 13723bcf0..944507108 100644
--- a/app/scripts/components/common/catalog/catalog-card.tsx
+++ b/app/scripts/components/common/catalog/catalog-card.tsx
@@ -22,7 +22,7 @@ interface CatalogCardProps {
   selected?: boolean;
   onDatasetClick?: () => void;
   pathname?: string;
-  linkProperties: LinkProperties;
+  linkProperties?: LinkProperties;
 }
 
 const CardSelectable = styled(Card)<{
@@ -137,6 +137,7 @@ export const CatalogCard = (props: CatalogCardProps) => {
         </CardMeta>
       }
       linkLabel='View dataset'
+      onClick={handleClick}
       title={
         <TextHighlight value={searchTerm} disabled={searchTerm.length < 3}>
           {title}
@@ -170,7 +171,7 @@ export const CatalogCard = (props: CatalogCardProps) => {
           ) : null}
         </>
       }
-      linkProperties={{...linkProperties, linkTo: linkTo, onClick: handleClick}}
+      {...(linkProperties ? {linkProperties: {...linkProperties, linkTo: linkTo}} : {})}
     />
   );
 };
diff --git a/app/scripts/components/common/catalog/catalog-content.tsx b/app/scripts/components/common/catalog/catalog-content.tsx
index 34de58ff7..dcac02395 100644
--- a/app/scripts/components/common/catalog/catalog-content.tsx
+++ b/app/scripts/components/common/catalog/catalog-content.tsx
@@ -264,7 +264,6 @@ function CatalogContent({
                           selectable={true}
                           selected={selectedIds.includes(datasetLayer.id)}
                           onDatasetClick={() => onCardSelect(datasetLayer.id, currentDataset)}
-                          linkProperties={linkProperties}
                           pathname={pathname}
                         />
                       </li>
diff --git a/app/scripts/components/common/element-interactive.js b/app/scripts/components/common/element-interactive.js
index 497679951..c5adacb8c 100644
--- a/app/scripts/components/common/element-interactive.js
+++ b/app/scripts/components/common/element-interactive.js
@@ -73,7 +73,7 @@ const InteractiveLink = styled.a`
  */
 export const ElementInteractive = React.forwardRef(
   function ElementInteractiveFwd(props, ref) {
-    const { linkProps = {}, linkLabel = 'View', children, ...rest } = props;
+    const { linkProps = {}, linkLabel = 'View', children, onClick, ...rest } = props;
     const [isStateOver, setStateOver] = useState(false);
     const [isStateActive, setStateActive] = useState(false);
     const [isStateFocus, setStateFocus] = useState(false);
@@ -92,17 +92,22 @@ export const ElementInteractive = React.forwardRef(
           setStateOver(false);
           setStateActive(false);
         }, [])}
+        onClick={onClick}
       >
         {children}
-        <InteractiveLink
-          {...linkProps}
-          onMouseDown={useCallback(() => setStateActive(true), [])}
-          onMouseUp={useCallback(() => setStateActive(false), [])}
-          onFocus={useCallback(() => setStateFocus(true), [])}
-          onBlur={useCallback(() => setStateFocus(false), [])}
-        >
-          {linkLabel}
-        </InteractiveLink>
+        {
+          linkProps && (
+            <InteractiveLink
+              {...linkProps}
+              onMouseDown={useCallback(() => setStateActive(true), [])}
+              onMouseUp={useCallback(() => setStateActive(false), [])}
+              onFocus={useCallback(() => setStateFocus(true), [])}
+              onBlur={useCallback(() => setStateFocus(false), [])}
+            >
+              {linkLabel}
+            </InteractiveLink>
+          )
+        }
       </Wrapper>
     );
   }
@@ -111,7 +116,8 @@ export const ElementInteractive = React.forwardRef(
 ElementInteractive.propTypes = {
   children: T.node.isRequired,
   linkLabel: T.string.isRequired,
-  linkProps: T.object
+  linkProps: T.object,
+  onClick: T.func
 };
 
 /**
diff --git a/app/scripts/components/common/smart-link.tsx b/app/scripts/components/common/smart-link.tsx
index e6cf6f089..b112b38ca 100644
--- a/app/scripts/components/common/smart-link.tsx
+++ b/app/scripts/components/common/smart-link.tsx
@@ -6,7 +6,6 @@ import { getLinkProps } from '$utils/url';
 interface SmartLinkProps {
   to: string;
   isLinkExternal?: boolean;
-  onClick?: ()=> void;
   children?: ReactNode;
 }
 
@@ -14,9 +13,9 @@ interface SmartLinkProps {
  * Switches between a `a` and a `Link` depending on the url.
  */
 export default function SmartLink(props: SmartLinkProps) {
-  const { to, isLinkExternal, onClick, children, ...rest } = props;
-  const isExternalLink = isLinkExternal ?? /^https?:\/\//.test(to);
-  const linkProps = getLinkProps(to, isLinkExternal, undefined, onClick);
+  const { to, isLinkExternal, children, ...rest } = props;
+  const isExternalLink = /^https?:\/\//.test(to);
+  const linkProps = getLinkProps(to);
 
   return isExternalLink ? (
     <a {...linkProps} {...rest}> {children} </a>
diff --git a/app/scripts/components/stories/hub/hub-content.tsx b/app/scripts/components/stories/hub/hub-content.tsx
index 928f2ed38..b9fff876a 100644
--- a/app/scripts/components/stories/hub/hub-content.tsx
+++ b/app/scripts/components/stories/hub/hub-content.tsx
@@ -184,7 +184,6 @@ export default function HubContent(props: HubContentProps) {
                   linkProperties={{
                     ...linkProperties,
                     linkTo: `${d.asLink?.url ?? d.path}`,
-                    isLinkExternal: d.isLinkExternal
                   }}
                   title={
                     <TextHighlight value={search} disabled={search.length < 3}>
diff --git a/app/scripts/types/veda.ts b/app/scripts/types/veda.ts
index a75e99cf6..b6e56f882 100644
--- a/app/scripts/types/veda.ts
+++ b/app/scripts/types/veda.ts
@@ -287,5 +287,4 @@ export interface DatasetDataWithEnhancedLayers extends DatasetData {
 export interface LinkProperties {
   LinkElement: string | ComponentType<any> | undefined;
   pathAttributeKeyName: string;
-  onClick?: MouseEventHandler;
 }
\ No newline at end of file
diff --git a/app/scripts/utils/url.ts b/app/scripts/utils/url.ts
index 926bf23ff..2f00c00ed 100644
--- a/app/scripts/utils/url.ts
+++ b/app/scripts/utils/url.ts
@@ -9,8 +9,7 @@ export const getLinkProps = (
   linkTo: string,
   as?: React.ForwardRefExoticComponent<
     LinkProps & React.RefAttributes<HTMLAnchorElement>
-  >,
-  onClick?: (() => void) | MouseEventHandler
+  >
 ) => {
   // Open the link in a new tab when link is external
   const isExternalLink = /^https?:\/\//.test(linkTo);
@@ -19,11 +18,9 @@ export const getLinkProps = (
         href: linkTo,
         to: linkTo,
         ...{ target: '_blank', rel: 'noopener noreferrer' },
-        ...(onClick ? { onClick: onClick } : {})
       }
     : {
         ...(as ? { as: as } : {}),
         to: linkTo,
-        ...(onClick ? { onClick: onClick } : {})
       };
 };

From 8321a129e63e6b79c5e6e711690ede519eb76732 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 11 Nov 2024 16:36:21 -0500
Subject: [PATCH 34/38] remove try/catch around area/point selection logic into
 useEffect

---
 app/scripts/components/common/card/index.tsx  |  5 ++--
 .../map/controls/aoi/custom-aoi-control.tsx   | 29 +++++++++----------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
index 2d1361ea2..74e705cd1 100644
--- a/app/scripts/components/common/card/index.tsx
+++ b/app/scripts/components/common/card/index.tsx
@@ -233,7 +233,6 @@ export function ExternalLinkFlag() {
 
 export interface LinkWithPathProperties extends LinkProperties {
   linkTo: string;
-  isLinkExternal?: boolean;
 }
 
 export interface CardComponentBaseProps {
@@ -254,12 +253,12 @@ export interface CardComponentBaseProps {
   onClick?: MouseEventHandler;
 }
 
-// @TODO: Consolidate these props when the instance adapts the new syntax
+// @TODO: Created because GHG uses the card component directly and passes in "linkTo" prop. Consolidate these props when the instance adapts the new syntax
 // Specifically: https://github.com/US-GHG-Center/veda-config-ghg/blob/develop/custom-pages/news-and-events/component.tsx#L108
 export interface CardComponentPropsDeprecated extends CardComponentBaseProps {
   linkTo: string;
-  isLinkExternal?: boolean; // @TODO-SANDRA: Why does this overlap with LinkWithPathProperties
 }
+
 export interface CardComponentProps extends CardComponentBaseProps {
   linkProperties?: LinkWithPathProperties;
 }
diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
index 9280e5d45..24964a3e4 100644
--- a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
+++ b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
@@ -76,15 +76,25 @@ function CustomAoI({
   const [selectedState, setSelectedState] = useState('');
   const [presetIds, setPresetIds] = useState([]);
   const [fileUploadedIds, setFileUplaodedIds] = useState([]);
+  const [, forceUpdate] = useState(0);   // @NOTE:  Needed so that this component re-renders to when the draw selection changes from feature to point.
+  const [isAreaSelected, setAreaSelected] = useState<boolean>(false);
+  const [isPointSelected, setPointSelected] = useState<boolean>(false);
 
   const [selectedForEditing, setSelectedForEditing] = useAtom(selectedForEditingAtom);
 
   const { onUpdate, isDrawing, setIsDrawing, features } = useAois();
   const aoiDeleteAll = useSetAtom(aoiDeleteAllAtom);
 
-  // Needed so that this component re-renders to when the draw selection changes
-  // from feature to point.
-  const [, forceUpdate] = useState(0);
+  // @NOTE: map?._drawControl?.getSelected() needs access to mapboxgl draw context store,
+  // but the function gets called before mapboxdraw store is initialized (before being added to map) resulting in an error
+  useEffect(() => {
+    if (!map) return;
+
+    const mbDraw = map?._drawControl;
+    setAreaSelected(mbDraw?.getSelected().features.length);
+    setPointSelected(mbDraw?.getSelectedPoints()?.features.length)
+  }, [map])
+  
   useEffect(() => {
     const mbDraw = map?._drawControl;
     if (!mbDraw) return;
@@ -249,19 +259,6 @@ function CustomAoI({
     mbDraw.trash();
   }, [features, aoiDeleteAll, map]);
 
-  let isAreaSelected = false;
-  let isPointSelected = false;
-
-  // @NOTE: map?._drawControl?.getSelected() needs access to mapboxgl draw context store,
-  // but the function gets called before mapboxdraw store is initialized (before being added to map) resulting in an error
-  // Wrapping with try block so the values get subbed even when the store is not available
-  try {
-    isAreaSelected = !!(map?._drawControl?.getSelected().features.length);
-    isPointSelected = !!(map?._drawControl?.getSelectedPoints()?.features.length);
-  } catch(e) {
-    isAreaSelected = false;
-    isPointSelected = false;
-  }
   const hasFeatures = !!features.length;
 
   return (

From c5022240b373e1d7669ca26a2feae05912abb3ca Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 11 Nov 2024 17:13:40 -0500
Subject: [PATCH 35/38] Fix to linter and ts error

---
 .../components/common/element-interactive.js  | 30 ++++++++++---------
 .../common/featured-slider-section.tsx        |  3 +-
 .../map/controls/aoi/custom-aoi-control.tsx   |  6 ++--
 .../components/common/page-header/index.tsx   |  2 +-
 .../common/page-header/logo-container.tsx     |  3 +-
 .../components/common/page-header/logo.tsx    |  2 +-
 .../common/page-header/nav-menu-item.tsx      |  2 +-
 app/scripts/components/common/smart-link.tsx  |  8 ++---
 app/scripts/index.ts                          |  2 +-
 app/scripts/types/veda.ts                     |  2 +-
 app/scripts/utils/url.ts                      |  2 +-
 11 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/app/scripts/components/common/element-interactive.js b/app/scripts/components/common/element-interactive.js
index c5adacb8c..6deebd1f8 100644
--- a/app/scripts/components/common/element-interactive.js
+++ b/app/scripts/components/common/element-interactive.js
@@ -73,7 +73,13 @@ const InteractiveLink = styled.a`
  */
 export const ElementInteractive = React.forwardRef(
   function ElementInteractiveFwd(props, ref) {
-    const { linkProps = {}, linkLabel = 'View', children, onClick, ...rest } = props;
+    const {
+      linkProps = {},
+      linkLabel = 'View',
+      children,
+      onClick,
+      ...rest
+    } = props;
     const [isStateOver, setStateOver] = useState(false);
     const [isStateActive, setStateActive] = useState(false);
     const [isStateFocus, setStateFocus] = useState(false);
@@ -95,19 +101,15 @@ export const ElementInteractive = React.forwardRef(
         onClick={onClick}
       >
         {children}
-        {
-          linkProps && (
-            <InteractiveLink
-              {...linkProps}
-              onMouseDown={useCallback(() => setStateActive(true), [])}
-              onMouseUp={useCallback(() => setStateActive(false), [])}
-              onFocus={useCallback(() => setStateFocus(true), [])}
-              onBlur={useCallback(() => setStateFocus(false), [])}
-            >
-              {linkLabel}
-            </InteractiveLink>
-          )
-        }
+        <InteractiveLink
+          {...linkProps}
+          onMouseDown={useCallback(() => setStateActive(true), [])}
+          onMouseUp={useCallback(() => setStateActive(false), [])}
+          onFocus={useCallback(() => setStateFocus(true), [])}
+          onBlur={useCallback(() => setStateFocus(false), [])}
+        >
+          {linkLabel}
+        </InteractiveLink>
       </Wrapper>
     );
   }
diff --git a/app/scripts/components/common/featured-slider-section.tsx b/app/scripts/components/common/featured-slider-section.tsx
index 297e675d2..a26ec2eb9 100644
--- a/app/scripts/components/common/featured-slider-section.tsx
+++ b/app/scripts/components/common/featured-slider-section.tsx
@@ -116,8 +116,7 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
                       linkLabel='View more'
                       linkProperties={{
                         ...linkProperties,
-                        linkTo: `${d.asLink?.url ?? getItemPath(d)}`,
-                        isLinkExternal: d.isLinkExternal
+                        linkTo: `${d.asLink?.url ?? getItemPath(d)}`
                       }}
                       title={d.name}
                       overline={
diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
index 24964a3e4..9e11b9abf 100644
--- a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
+++ b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
@@ -92,9 +92,9 @@ function CustomAoI({
 
     const mbDraw = map?._drawControl;
     setAreaSelected(mbDraw?.getSelected().features.length);
-    setPointSelected(mbDraw?.getSelectedPoints()?.features.length)
-  }, [map])
-  
+    setPointSelected(mbDraw?.getSelectedPoints()?.features.length);
+  }, [map]);
+
   useEffect(() => {
     const mbDraw = map?._drawControl;
     if (!mbDraw) return;
diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx
index 83cf15661..1b603f88a 100644
--- a/app/scripts/components/common/page-header/index.tsx
+++ b/app/scripts/components/common/page-header/index.tsx
@@ -15,7 +15,6 @@ import {
 } from '@devseed-ui/collecticons';
 
 import UnscrollableBody from '../unscrollable-body';
-import { LinkProperties } from '../card';
 import NavMenuItem from './nav-menu-item';
 import { NavItem } from './types';
 
@@ -23,6 +22,7 @@ import { variableGlsp } from '$styles/variable-utils';
 import { PAGE_BODY_ID } from '$components/common/layout-root';
 import { useMediaQuery } from '$utils/use-media-query';
 import { HEADER_ID } from '$utils/use-sliding-sticky-header';
+import { LinkProperties } from '$types/veda';
 
 
 const PageHeaderSelf = styled.header`
diff --git a/app/scripts/components/common/page-header/logo-container.tsx b/app/scripts/components/common/page-header/logo-container.tsx
index 80cc709c0..d0cac7c6d 100644
--- a/app/scripts/components/common/page-header/logo-container.tsx
+++ b/app/scripts/components/common/page-header/logo-container.tsx
@@ -1,7 +1,8 @@
 import React, { ComponentType } from 'react';
 import { Tip } from '../tip';
-import { LinkProperties } from '$types/veda';
 import { Brand, PageTitleSecLink } from './logo';
+import { LinkProperties } from '$types/veda';
+
 /**
  * LogoContainer that is meant to integrate in the default page header without the dependencies of the veda virtual modules
  * and expects the Logo SVG to be passed in as a prop - this will support the instance for refactor
diff --git a/app/scripts/components/common/page-header/logo.tsx b/app/scripts/components/common/page-header/logo.tsx
index a4826a83e..383539ed4 100644
--- a/app/scripts/components/common/page-header/logo.tsx
+++ b/app/scripts/components/common/page-header/logo.tsx
@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import { glsp, media, themeVal } from '@devseed-ui/theme-provider';
 import NasaLogo from '../nasa-logo';
 import { Tip } from '../tip';
-import { LinkProperties } from '../card';
 import { ComponentOverride } from '$components/common/page-overrides';
+import { LinkProperties } from '$types/veda';
 
 const appTitle = process.env.APP_TITLE;
 const appVersion = process.env.APP_VERSION;
diff --git a/app/scripts/components/common/page-header/nav-menu-item.tsx b/app/scripts/components/common/page-header/nav-menu-item.tsx
index ba4889432..c56249d63 100644
--- a/app/scripts/components/common/page-header/nav-menu-item.tsx
+++ b/app/scripts/components/common/page-header/nav-menu-item.tsx
@@ -12,10 +12,10 @@ import { DropMenu, DropMenuItem } from '@devseed-ui/dropdown';
 
 import DropdownScrollable from '../dropdown-scrollable';
 import GoogleForm from '../google-form';
-import { LinkProperties } from '../card';
 import { AlignmentEnum, InternalNavLink, ExternalNavLink, NavLinkItem, DropdownNavLink, ModalNavLink, NavItem, NavItemType } from './types';
 import GlobalMenuLinkCSS from '$styles/menu-link';
 import { useMediaQuery } from '$utils/use-media-query';
+import { LinkProperties } from '$types/veda';
 
 
 const rgbaFixed = rgba as any;
diff --git a/app/scripts/components/common/smart-link.tsx b/app/scripts/components/common/smart-link.tsx
index b112b38ca..e22ddbcc3 100644
--- a/app/scripts/components/common/smart-link.tsx
+++ b/app/scripts/components/common/smart-link.tsx
@@ -5,7 +5,6 @@ import { getLinkProps } from '$utils/url';
 
 interface SmartLinkProps {
   to: string;
-  isLinkExternal?: boolean;
   children?: ReactNode;
 }
 
@@ -13,7 +12,7 @@ interface SmartLinkProps {
  * Switches between a `a` and a `Link` depending on the url.
  */
 export default function SmartLink(props: SmartLinkProps) {
-  const { to, isLinkExternal, children, ...rest } = props;
+  const { to, children, ...rest } = props;
   const isExternalLink = /^https?:\/\//.test(to);
   const linkProps = getLinkProps(to);
 
@@ -37,8 +36,9 @@ export function CustomLink(props: CustomLinkProps) {
   const isExternalLink = /^https?:\/\//.test(href);
   const linkProps = getLinkProps(href);
   return isExternalLink ? (
-      <a {...linkProps} {...rest} />
+    // @ts-ignore
+    <a {...linkProps} {...rest} />
   ) : (
     <Link {...linkProps} {...rest} />
   );
-}
+}
\ No newline at end of file
diff --git a/app/scripts/index.ts b/app/scripts/index.ts
index 4e350525f..a276bbb4b 100644
--- a/app/scripts/index.ts
+++ b/app/scripts/index.ts
@@ -60,7 +60,7 @@ export {
   LogoContainer,
   ExplorationAndAnalysis,
   DatasetSelectorModal,
-  
+
   // HOOKS
   useTimelineDatasetAtom,
   useFiltersWithQS,
diff --git a/app/scripts/types/veda.ts b/app/scripts/types/veda.ts
index b6e56f882..96d5222c7 100644
--- a/app/scripts/types/veda.ts
+++ b/app/scripts/types/veda.ts
@@ -1,7 +1,7 @@
 import * as dateFns from 'date-fns';
 import mapboxgl from 'mapbox-gl';
 import { MDXModule } from 'mdx/types';
-import { MouseEventHandler, ComponentType } from 'react';
+import { ComponentType } from 'react';
 // ///////////////////////////////////////////////////////////////////////////
 //  Datasets                                                                //
 // ///////////////////////////////////////////////////////////////////////////
diff --git a/app/scripts/utils/url.ts b/app/scripts/utils/url.ts
index 2f00c00ed..0b6e2626e 100644
--- a/app/scripts/utils/url.ts
+++ b/app/scripts/utils/url.ts
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler } from 'react';
+import React from 'react';
 import { LinkProps } from 'react-router-dom';
 
 export function isExternalLink(link: string): boolean {

From 0ec57446472a78cf4c49c04aeaeace3ba5a59f01 Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 11 Nov 2024 17:20:50 -0500
Subject: [PATCH 36/38] fix lint error..

---
 app/scripts/components/common/smart-link.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/scripts/components/common/smart-link.tsx b/app/scripts/components/common/smart-link.tsx
index e22ddbcc3..8ebb4d77f 100644
--- a/app/scripts/components/common/smart-link.tsx
+++ b/app/scripts/components/common/smart-link.tsx
@@ -36,7 +36,7 @@ export function CustomLink(props: CustomLinkProps) {
   const isExternalLink = /^https?:\/\//.test(href);
   const linkProps = getLinkProps(href);
   return isExternalLink ? (
-    // @ts-ignore
+    // @ts-expect-error
     <a {...linkProps} {...rest} />
   ) : (
     <Link {...linkProps} {...rest} />

From bee9d96cc80268fd93a245a1bd05dae1f4c081da Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Mon, 11 Nov 2024 17:27:52 -0500
Subject: [PATCH 37/38] Fix lint error again.. ugh

---
 app/scripts/components/common/smart-link.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/scripts/components/common/smart-link.tsx b/app/scripts/components/common/smart-link.tsx
index 8ebb4d77f..7b0a369b0 100644
--- a/app/scripts/components/common/smart-link.tsx
+++ b/app/scripts/components/common/smart-link.tsx
@@ -36,7 +36,7 @@ export function CustomLink(props: CustomLinkProps) {
   const isExternalLink = /^https?:\/\//.test(href);
   const linkProps = getLinkProps(href);
   return isExternalLink ? (
-    // @ts-expect-error
+    // @ts-expect-error linkProps returned from getLinkProps are not being recognized suddenly
     <a {...linkProps} {...rest} />
   ) : (
     <Link {...linkProps} {...rest} />

From 1ab1a3f0b58b934104901833411dcf342ca2140d Mon Sep 17 00:00:00 2001
From: Sandra Hoang <sandrahoang686@gmail.com>
Date: Tue, 12 Nov 2024 15:05:42 -0500
Subject: [PATCH 38/38] add updated state to aoi use effect dep array

---
 .../common/map/controls/aoi/custom-aoi-control.tsx        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
index 9e11b9abf..9f2a7814d 100644
--- a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
+++ b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
@@ -76,7 +76,7 @@ function CustomAoI({
   const [selectedState, setSelectedState] = useState('');
   const [presetIds, setPresetIds] = useState([]);
   const [fileUploadedIds, setFileUplaodedIds] = useState([]);
-  const [, forceUpdate] = useState(0);   // @NOTE:  Needed so that this component re-renders to when the draw selection changes from feature to point.
+  const [updated, forceUpdate] = useState(0);   // @NOTE:  Needed so that this component re-renders to when the draw selection changes from feature to point.
   const [isAreaSelected, setAreaSelected] = useState<boolean>(false);
   const [isPointSelected, setPointSelected] = useState<boolean>(false);
 
@@ -91,9 +91,9 @@ function CustomAoI({
     if (!map) return;
 
     const mbDraw = map?._drawControl;
-    setAreaSelected(mbDraw?.getSelected().features.length);
-    setPointSelected(mbDraw?.getSelectedPoints()?.features.length);
-  }, [map]);
+    setAreaSelected(!!(mbDraw?.getSelected().features.length));
+    setPointSelected(!!(mbDraw?.getSelectedPoints()?.features.length));
+  }, [map, updated]);
 
   useEffect(() => {
     const mbDraw = map?._drawControl;