update slidingStickyHeaderProps and pass in element for ElementIntera…

…ctive

app/scripts/components/common/card/index.tsx

@@ -237,6 +237,7 @@ export interface CardComponentProps {
   footerContent?: JSX.Element;
   onCardClickCapture?: MouseEventHandler;
   onLinkClick?: MouseEventHandler;
+  CardInteractiveElement?: any;
 }
 
 function CardComponent(props: CardComponentProps) {
@@ -255,7 +256,8 @@ function CardComponent(props: CardComponentProps) {
     parentTo,
     footerContent,
     onCardClickCapture,
-    onLinkClick
+    onLinkClick,
+    CardInteractiveElement,
   } = props;
 
   const isExternalLink = /^https?:\/\//.test(linkTo);
@@ -270,6 +272,7 @@ function CardComponent(props: CardComponentProps) {
       linkLabel={linkLabel ?? 'View more'}
       linkProps={linkProps}
       onClickCapture={onCardClickCapture}
+      CardInteractiveElement={CardInteractiveElement}
     >
       {
         cardType !== 'horizontal-info' && (

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

@@ -20,6 +20,7 @@ interface CatalogCardProps {
   selectable?: boolean;
   selected?: boolean;
   onDatasetClick?: () => void;
+  CardInteractiveElement?: any;
 }
 
 const CardSelectable = styled(Card)<{ checked?: boolean, selectable?: boolean }>`
@@ -90,7 +91,7 @@ const CardSelectable = styled(Card)<{ checked?: boolean, selectable?: boolean }>
 `;
 
 export const CatalogCard = (props: CatalogCardProps) => {
-  const { dataset, layer, searchTerm, selectable, selected, onDatasetClick } = props;
+  const { dataset, layer, searchTerm, selectable, selected, onDatasetClick, CardInteractiveElement } = props;
 
   const topics = getTaxonomy(dataset, TAXONOMY_TOPICS)?.values;
   const sources = getTaxonomy(dataset, TAXONOMY_SOURCE)?.values;
@@ -153,6 +154,7 @@ export const CatalogCard = (props: CatalogCardProps) => {
           ) : null}
         </>
       }
+      CardInteractiveElement={CardInteractiveElement}
     />
   );
 };

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

@@ -34,6 +34,8 @@ export interface CatalogContentProps {
   search: string;
   taxonomies: Record<string, string[]>;
   onAction: (action: FilterActions, value?: any) => void;
+  location?: any;
+  CardInteractiveElement?: any;
 }
 
 const DEFAULT_SORT_OPTION = 'asc';
@@ -70,10 +72,12 @@ function CatalogContent({
   search,
   taxonomies,
   onAction,
+  location,
+  CardInteractiveElement,
 }: CatalogContentProps) {
   const [exclusiveSourceSelected, setExclusiveSourceSelected] = useState<string | null>(null);
   const isSelectable = selectedIds !== undefined;
-
+  
   const datasetTaxonomies = generateTaxonomies(datasets);
   const urlTaxonomyItems = taxonomies ? Object.entries(taxonomies).map(([key, val]) => getTaxonomyByIds(key, val, datasetTaxonomies)).flat() : [];
 
@@ -188,7 +192,7 @@ function CatalogContent({
   const getSelectedLayerCount = (dataset) => {
     return dataset.layers.filter((layer) => selectedIds?.includes(layer.id)).length;
   };
-  console.log(`LOG_FOR_TEST_DATASETS: `, datasets)
+
   return (
     <Content>
       <FiltersControl
@@ -202,6 +206,7 @@ function CatalogContent({
         exclusiveSourceSelected={exclusiveSourceSelected}
         customTopOffset={isSelectable ? 50 : 0}
         openByDefault={isSelectable ? false : true}
+        location={location}
       />
       <Catalog>
         <CatalogTagsContainer
@@ -249,7 +254,8 @@ function CatalogContent({
                           dataset={currentDataset}
                           selectable={true}
                           selected={selectedIds.includes(datasetLayer.id)}
-                          // onDatasetClick={() => onCardSelect(datasetLayer.id, currentDataset)}
+                          onDatasetClick={() => onCardSelect(datasetLayer.id, currentDataset)}
+                          CardInteractiveElement={CardInteractiveElement}
                         />
                       </li>
                     ))}

app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts

@@ -1,6 +1,5 @@
 import { useAtom } from 'jotai';
 import { useCallback } from 'react';
-import { useNavigate } from 'react-router';
 import useQsStateCreator from 'qs-state-hook';
 import { taxonomyAtom } from '../atoms/taxonomy-atom';
 import { searchAtom } from '../atoms/search-atom';
@@ -33,11 +32,23 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult {
   };
 } 
 
-export function useFiltersWithQS(): UseFiltersWithQueryResult {
-  const navigate = useNavigate();
-  const useQsState = useQsStateCreator({
-    commit: navigate
-  });
+  export function useFiltersWithQS({
+    navigate,
+    push=false
+  }: {
+    navigate: any,
+    push?: boolean,
+  }): UseFiltersWithQueryResult {
+
+    let navCommit = navigate;
+
+    if (push) {
+      navCommit = ({ search }) => navigate.push(`?${search}`);
+    }
+
+    const useQsState = useQsStateCreator({
+      commit: navCommit
+    });
 
   const [search, setSearch] = useQsState.memo(
     {

app/scripts/components/common/catalog/filters-control.tsx

@@ -1,19 +1,19 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { Location } from 'react-router';
 import styled from 'styled-components';
 import { FilterActions } from './utils';
 import { Taxonomy } from '$types/veda';
 import SearchField from '$components/common/search-field';
 import CheckableFilters, { OptionItem } from '$components/common/form/checkable-filter';
-// import { useSlidingStickyHeader, HEADER_TRANSITION_DURATION } from '$utils/use-sliding-sticky-header';
+import { useSlidingStickyHeader, HEADER_TRANSITION_DURATION } from '$utils/use-sliding-sticky-header';
 
 const ControlsWrapper = styled.div<{ widthValue?: string; heightValue?: string; topValue: string }>`
   min-width: 20rem;
   width: ${props => props.widthValue ?? '20rem'};
   position: sticky;
   top: calc(${props => props.topValue} + 1rem);
   height: ${props => props.heightValue};
-  // transition: top ${HEADER_TRANSITION_DURATION}ms ease-out;
-  transition: top 1000ms ease-out;
+  transition: top ${HEADER_TRANSITION_DURATION}ms ease-out;
 `;
 
 interface FiltersMenuProps {
@@ -28,6 +28,7 @@ interface FiltersMenuProps {
   exclusiveSourceSelected?: string | null;
   customTopOffset?: number;
   openByDefault?: boolean;
+  location?: Location
 }
 
 export default function FiltersControl(props: FiltersMenuProps) {
@@ -47,12 +48,13 @@ export default function FiltersControl(props: FiltersMenuProps) {
     // has a different header reference as opposed to what the useSlidingStickyHeader hook
     // uses as a reference (the main page header). To avoid changing the reference IDs in the
     // main logic of the sliding sticky header hook, we provide this custom top offset for more control.
-    customTopOffset = 0
+    customTopOffset = 0,
+    location,
   } = props;
 
   const controlsRef = useRef<HTMLDivElement>(null);
   const [controlsHeight, setControlsHeight] =  useState<number>(0);
-  // const { isHeaderHidden, wrapperHeight } = useSlidingStickyHeader();
+  const { isHeaderHidden, wrapperHeight } = useSlidingStickyHeader(location);
 
   const handleChanges = useCallback((item: OptionItem, action: 'add' | 'remove') => {
     const isSelected = allSelected.some(selected => selected.id === item.id && selected.taxonomy === item.taxonomy);
@@ -96,10 +98,9 @@ export default function FiltersControl(props: FiltersMenuProps) {
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [exclusiveSourceSelected]);
-
+  
   return (
-    // <ControlsWrapper widthValue={width} heightValue={controlsHeight+'px'} topValue={isHeaderHidden ? '0px': `${wrapperHeight - customTopOffset}px`}>
-    <ControlsWrapper widthValue={width} heightValue={controlsHeight+'px'} topValue={'0px'}>
+    <ControlsWrapper widthValue={width} heightValue={controlsHeight+'px'} topValue={isHeaderHidden && wrapperHeight ? '0px': `${wrapperHeight - customTopOffset}px`}>
       <div ref={controlsRef}>
         <SearchField
           size='large'

app/scripts/components/common/catalog/index.tsx

@@ -2,19 +2,17 @@ import React from 'react';
 import styled from 'styled-components';
 import { themeVal } from '@devseed-ui/theme-provider';
 import CatalogContent from './catalog-content';
-// import { useFiltersWithQS } from './controls/hooks/use-filters-with-query';
 import { DatasetData } from '$types/veda';
-// import {
-//   useSlidingStickyHeaderProps
-// } from '$components/common/layout-root/useSlidingStickyHeaderProps';
+import {
+  useSlidingStickyHeaderProps
+} from '$components/common/layout-root/useSlidingStickyHeaderProps';
 
 import {
   FoldHeader,
   FoldHeadline,
   FoldTitle
 } from '$components/common/fold';
 import { variableGlsp } from '$styles/variable-utils';
-// import { UseFiltersWithQueryResult } from './controls/hooks/use-filters-with-query';
 
 /**
  * CATALOG Feature component
@@ -44,20 +42,20 @@ export interface CatalogViewProps {
     taxonomies: Record<string, string[]> | Record<string, never>,
     onAction: () => void,
   } | any;
+  location?: any;
+  CardInteractiveElement?: any;
 }
 
 function CatalogView({
   datasets,
-  onFilterChanges
+  onFilterChanges,
+  location,
+  CardInteractiveElement,
 }: CatalogViewProps) {
 
-  // const { headerHeight } = useSlidingStickyHeaderProps();
-  // const { isHeaderHidden, wrapperHeight } = useSlidingStickyHeader();
+  const { headerHeight } = useSlidingStickyHeaderProps();
 
-  // const { search, taxonomies , onAction } = useFiltersWithQS();
   const { search, taxonomies , onAction } = onFilterChanges();
-  console.log(`taxonomies: `, taxonomies)
-  const headerHeight = 60;
 
   return (
     <CatalogWrapper>
@@ -75,9 +73,8 @@ function CatalogView({
         search={search}
         taxonomies={taxonomies}
         onAction={onAction}
-        search={''}
-        taxonomies={{}}
-        onAction={() => true}
+        location={location}
+        CardInteractiveElement={CardInteractiveElement}
       />
     </CatalogWrapper>
   );

app/scripts/components/common/element-interactive.js

@@ -2,15 +2,6 @@ import React, { useCallback, useState } from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
 
-// const InteractiveLink = styled.a`
-//   position: absolute;
-//   inset: 0;
-//   z-index: -1;
-//   pointer-events: auto;
-//   font-size: 0;
-//   margin: 0;
-// `;
-
 export const Wrapper = styled.div`
   position: relative;
   z-index: 1;
@@ -73,11 +64,19 @@ export const Wrapper = styled.div`
  */
 export const ElementInteractive = React.forwardRef(
   function ElementInteractiveFwd(props, ref) {
-    const { linkProps = {}, linkLabel = 'View', children, ...rest } = props;
+    const {
+      linkProps = {},
+      linkLabel = 'View',
+      children,
+      CardInteractiveElement,
+      ...rest
+    } = props;
     const [isStateOver, setStateOver] = useState(false);
     const [isStateActive, setStateActive] = useState(false);
     const [isStateFocus, setStateFocus] = useState(false);
-    console.log(`linkLabel: `, linkLabel)
+
+    const CardInteractive = CardInteractiveElement ?? 'a';
+
     return (
       <Wrapper
         ref={ref}
@@ -94,24 +93,15 @@ export const ElementInteractive = React.forwardRef(
         }, [])}
       >
         {children}
-        {/* <InteractiveLink
-          {...linkProps}
-          onMouseDown={useCallback(() => setStateActive(true), [])}
-          onMouseUp={useCallback(() => setStateActive(false), [])}
-          onFocus={useCallback(() => setStateFocus(true), [])}
-          onBlur={useCallback(() => setStateFocus(false), [])}
-        >
-          {linkLabel}
-        </InteractiveLink> */}
-        <a
+        <CardInteractive
           {...linkProps}
           onMouseDown={useCallback(() => setStateActive(true), [])}
           onMouseUp={useCallback(() => setStateActive(false), [])}
           onFocus={useCallback(() => setStateFocus(true), [])}
           onBlur={useCallback(() => setStateFocus(false), [])}
         >
           {linkLabel}
-        </a>
+        </CardInteractive>
       </Wrapper>
     );
   }
@@ -120,7 +110,8 @@ export const ElementInteractive = React.forwardRef(
 ElementInteractive.propTypes = {
   children: T.node.isRequired,
   linkLabel: T.string.isRequired,
-  linkProps: T.object
+  linkProps: T.object,
+  CardInteractiveElement: T.any
 };
 
 /**

app/scripts/components/common/layout-root/context.tsx

@@ -5,6 +5,7 @@ import React, {
   SetStateAction,
   ReactNode,
 } from 'react';
+import { useLocation } from 'react-router';
 import { useSlidingStickyHeader } from '$utils/use-sliding-sticky-header';
 
 interface LayoutRootContextProps extends Record<string, any> {
@@ -29,8 +30,9 @@ export function LayoutRootContextProvider({
 
   // Put the header size and visibility status in the context so that children
   // elements can access them for positioning purposes.
+  const location = useLocation();
   const { isHeaderHidden, headerHeight, wrapperHeight } =
-    useSlidingStickyHeader();
+    useSlidingStickyHeader(location);
 
   const ctx = {
     ...layoutProps,

app/scripts/components/data-catalog/container.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import { useNavigate, useLocation } from 'react-router';
 import { getString } from 'veda';
+import styled from 'styled-components';
 import { getAllDatasetsProps } from '$utils/veda-data';
 import CatalogView from '$components/common/catalog';
 import { PageMainContent } from '$styles/page';
@@ -16,16 +18,32 @@ import { useFiltersWithQS } from '$components/common/catalog/controls/hooks/use-
  * veda2 instances can just use the direct component, 'DataCatalog', and manage data directly in their page views
  */
 
+const InteractiveLink = styled.a`
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: auto;
+  font-size: 0;
+  margin: 0;
+`;
+
 export default function DataCatalogContainer() {
   const allDatasets = getAllDatasetsProps(veda_faux_module_datasets);
-  // const { search, taxonomies , onAction } = useFiltersWithQS();
+  const pathName = useLocation();
+  const navigate = useNavigate();
+  const controlVars = useFiltersWithQS({navigate: navigate});
 
   return (
     <PageMainContent>
       <LayoutProps title='Data Catalog' description={getString('dataCatalogBanner').other} />
       <PageHero title='Data Catalog' description={getString('dataCatalogBanner').other} />
       <FeaturedDatasets />
-      <CatalogView datasets={allDatasets} onFilterChanges={useFiltersWithQS}/>
+      <CatalogView 
+        datasets={allDatasets}
+        onFilterChanges={() => controlVars}
+        location={pathName}
+        CardInteractiveElement={InteractiveLink}
+      />
     </PageMainContent>
   );
 }