Various fixes for E&A

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>

app/scripts/components/common/catalog/catalog-card.tsx

@@ -121,7 +121,7 @@ export const CatalogCard = (props: CatalogCardProps) => {
       overline={
         <CardMeta>
           <DatasetClassification dataset={dataset} />
-          <CardSourcesList sources={sources} />
+          <CardSourcesList sources={sources} linkProperties={linkProperties} />
         </CardMeta>
       }
       linkLabel='View dataset'

app/scripts/components/common/featured-slider-section.tsx

@@ -93,7 +93,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
@@ -108,9 +111,8 @@ 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}
@@ -120,6 +122,7 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
                             <DatasetClassification dataset={d} />
                           )}
                           <CardSourcesList
+                            linkProperties={linkProperties}
                             sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values}
                           />
                           <VerticalDivider variation='light' />

app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx

@@ -213,6 +213,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 &&
@@ -241,9 +242,19 @@ function CustomAoI({
     mbDraw.trash();
   }, [features, aoiDeleteAll, map]);
 
-  const isAreaSelected = !!map?._drawControl?.getSelected().features.length;
-  const isPointSelected =
-    !!map?._drawControl.getSelectedPoints().features.length;
+  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 (
@@ -330,7 +341,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;

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;

app/scripts/components/exploration/atoms/dates.ts

@@ -28,8 +28,8 @@ export const selectedDateAtom = atomWithUrlValueStability<Date | null>({
     if (!prev || !next) return prev === next;
     return prev.getTime() === next.getTime();
   },
-  dehydrate: (date) => {
-    return date?.toISOString() ?? '';
+  dehydrate: (d) => {
+    return d?.toISOString() ?? '';
   }
 });
 

app/scripts/components/exploration/components/dataset-selector-modal/index.tsx

@@ -1,23 +1,24 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { useAtom } from 'jotai';
 import {
   Modal,
   ModalBody,
   ModalFooter,
   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

app/scripts/components/exploration/components/layer-info-modal.tsx

@@ -12,7 +12,6 @@ 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';
@@ -54,7 +53,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 })}
   }
@@ -101,6 +101,7 @@ const LayerInfoLinerModal = styled.div`
 
 export default function LayerInfoModal(props: LayerInfoModalProps) {
   const { revealed, close, layerData } = props;
+
   const { parentData } = layerData;
   const dataCatalogPage = getDatasetPath(parentData.id);
   return (
@@ -132,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 to={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>
       }

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 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,17 @@ export default function ExplorationAndAnalysisContainer() {
       <TourManager />
       <PageMainContent>
         <PageHero title='Exploration' isHidden />
-        <ExplorationAndAnalysis datasets={datasets} setDatasets={setDatasets} openDatasetsSelectionModal={openModal} />
+        <ExplorationAndAnalysis
+          datasets={timelineDatasets}
+          setDatasets={setTimelineDatasets}
+          openDatasetsSelectionModal={openModal}
+        />
         <DatasetSelectorModal
           revealed={datasetModalRevealed}
           close={closeModal}
           datasets={allExploreDatasets}
+          timelineDatasets={timelineDatasets}
+          setTimelineDatasets={setTimelineDatasets}
           datasetPathName={DATASETS_PATH}
           linkProperties={{
             LinkElement: SmartLink,

app/scripts/components/exploration/data-utils-no-faux-module.ts

@@ -40,6 +40,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

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];
+}

app/scripts/components/stories/hub/hub-content.tsx

@@ -149,6 +149,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,
@@ -166,9 +167,8 @@ export default function HubContent(props:HubContentProps) {
                 }
                 linkLabel='View more'
                 linkProperties={{
+                  ...linkProperties,
                   linkTo: `${d.asLink?.url ?? d.path}`,
-                  LinkElement,
-                  pathAttributeKeyName,
                   isLinkExternal: d.isLinkExternal
                 }}
                 title={