Make Data selector modal work (#1213)

**Related Ticket:** #1156 ### Description of Changes - The main reason the data selector modal was not working is ~ again ~ link-related components error. I made it use `linkProperties` props. - I also moved `LinkProperties` type to `types/veda` ### Notes & Questions About Changes I will inline-comment ### Validation / Testing - Build the library from this branch - Use the built asset with this branch (of Next instance) : https://github.com/developmentseed/next-veda-ui/tree/data-selector-modal-test
NASA-IMPACT · Oct 28, 2024 · 2ae4c21 · 2ae4c21
2 parents c85eba0 + ce6bd1c
commit 2ae4c21
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 44 deletions.
diff --git 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';
@@ -16,6 +16,7 @@ import HorizontalInfoCard, { HorizontalCardStyles } from './horizontal-info-card
 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';
 
@@ -219,12 +220,6 @@ export function ExternalLinkFlag() {
   );
 }
 
-export interface LinkProperties {
-  LinkElement: string | ComponentType<any> | undefined;
-  pathAttributeKeyName: string;
-  onLinkClick?: MouseEventHandler;
-}
-
 export interface LinkWithPathProperties extends LinkProperties {
   linkTo: string;
   isLinkExternal?: boolean;
@@ -250,7 +245,7 @@ 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;
 }
 export interface CardComponentProps extends CardComponentBaseProps {
@@ -289,24 +284,23 @@ function CardComponent(props: CardComponentPropsType) {
     const { linkProperties: linkPropertiesProps } = props;
     linkProperties = linkPropertiesProps;
   } else {
-    const { linkTo, onLinkClick, isLinkExternal } = props;
+    const { linkTo, onClick, isLinkExternal } = props;
     linkProperties = {
       linkTo,
-      onLinkClick,
+      onClick,
       pathAttributeKeyName: 'to',
       LinkElement: SmartLink,
       isLinkExternal
     };
   }
 
   const isExternalLink = linkProperties.isLinkExternal ?? /^https?:\/\//.test(linkProperties.linkTo);
-
   return (
     <ElementInteractive
       linkProps={{
         as: linkProperties.LinkElement,
         [linkProperties.pathAttributeKeyName]: linkProperties.linkTo,
-        onLinkClick: 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
@@ -2,12 +2,12 @@ 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 { 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 { 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";
@@ -155,7 +155,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/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
@@ -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/common/smart-link.tsx b/app/scripts/components/common/smart-link.tsx
@@ -6,17 +6,17 @@ import { getLinkProps } from '$utils/url';
 interface SmartLinkProps {
   to: string;
   isLinkExternal?: boolean;
-  onLinkClick?: ()=> void;
+  onClick?: ()=> void;
   children?: ReactNode;
 }
 
 /**
  * Switches between a `a` and a `Link` depending on the optional `isLinkExternal` prop or the url.
  */
 export default function SmartLink(props: SmartLinkProps) {
-  const { to, isLinkExternal, onLinkClick, children, ...rest } = props;
+  const { to, isLinkExternal, onClick, children, ...rest } = props;
   const isExternalLink = isLinkExternal ?? /^https?:\/\//.test(to);
-  const linkProps = getLinkProps(to, isLinkExternal, undefined, onLinkClick);
+  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
@@ -1,28 +1,24 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useAtom } from 'jotai';
-import { DatasetData, DatasetLayer } from 'veda';
 import {
   Modal,
   ModalBody,
   ModalFooter,
   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/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';

diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx
@@ -4,15 +4,16 @@ 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 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 { DatasetSelectorModal } from './components/dataset-selector-modal';
-
-
+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
@@ -16,7 +16,7 @@ import {
   FoldTitle
 } from '$components/common/fold';
 import { useSlidingStickyHeaderProps } from '$components/common/layout-root/useSlidingStickyHeaderProps';
-import { Card, LinkProperties } from '$components/common/card';
+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';
@@ -32,7 +32,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
@@ -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                                                                //
 // ///////////////////////////////////////////////////////////////////////////
@@ -274,3 +274,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;
+  onClick?: MouseEventHandler;
+}