Floating Data Catalog Filters Sidebar Follow-up and starting some cleaning and modularizing

app/scripts/components/common/form/checkable-filter/index.tsx

@@ -10,7 +10,7 @@ import { CardTitle } from '$components/common/card/styles';
 
 const FilterMenu = styled.div`
   border: 2px solid ${themeVal('color.base-200')};
-  border-radius: 4px;
+  border-radius: ${themeVal('shape.rounded')};
   padding: 12px;
   margin-bottom: 1.5rem;
 `;
@@ -83,8 +83,14 @@ export interface OptionItem {
 }
 
 export default function CheckableFilters(props: CheckableFiltersProps) {
-  const {items, title, onChanges, globallySelected, tagItemCleared} = props;
-  const [show, setShow] = useState<boolean>(false);
+  const {
+    items,
+    title,
+    onChanges,
+    globallySelected,
+    tagItemCleared
+  } = props;
+  const [show, setShow] = useState<boolean>(true);
   const [count, setCount] = useState<number>(0);
   const [selected, setSelected] = useState<OptionItem[]>([]);
 
@@ -112,7 +118,7 @@ export default function CheckableFilters(props: CheckableFiltersProps) {
   }, [selected]);
 
   const isChecked = (item: OptionItem) => globallySelected.some((selected) => selected.id == item.id && selected.taxonomy == item.taxonomy);
-  
+
   useEffect(() => {
     if(!globallySelected || globallySelected.length === 0) {
       setCount(0);

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

@@ -1,16 +1,32 @@
 import React from 'react';
+import { getString } from 'veda';
 import { allDatasets } from '$components/exploration/data-utils';
 import DataCatalog from '$components/data-catalog';
+import { PageMainContent } from '$styles/page';
+import { LayoutProps } from '$components/common/layout-root';
+import PageHero from '$components/common/page-hero';
+import { FeaturedDatasets } from '$components/common/featured-slider-section';
 
-// @VEDA2-REFACTOR-WORK
-
-// @NOTE: This container component serves as a wrapper for the purpose of data management, this is ONLY to support current instances. 
-// veda2 instances can just use the direct component, 'DataCatalog', and manage data directly in their page views
+/**
+ * @VEDA2-REFACTOR-WORK
+ * 
+ * @NOTE: This container component serves as a wrapper for the purpose of data management, this is ONLY to support current instances. 
+ * veda2 instances can just use the direct component, 'DataCatalog', and manage data directly in their page views
+ */
 
 export default function DataCatalogContainer() {
   return (
-    <>
+    <PageMainContent>
+      <LayoutProps
+        title='Data Catalog'
+        description={getString('dataCatalogBanner').other}
+      />
+      <PageHero
+        title='Data Catalog'
+        description={getString('dataCatalogBanner').other}
+      />
+      <FeaturedDatasets />
       <DataCatalog datasets={allDatasets} />
-    </>
+    </PageMainContent>
   );
 }

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

@@ -1,13 +1,18 @@
-import React, {useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import { Taxonomy } from 'veda';
 import SearchField from '$components/common/search-field';
 import CheckableFilters, { OptionItem } from '$components/common/form/checkable-filter';
 import { Actions, useBrowserControls } from '$components/common/browse-controls/use-browse-controls';
+import { useSlidingStickyHeader, HEADER_TRANSITION_DURATION }  from '$utils/use-sliding-sticky-header';
 
-const ControlsWrapper = styled.div<{ width?: string; }>`
+const ControlsWrapper = styled.div<{ widthValue?: string; heightValue?: string; topValue: string }>`
   min-width: 20rem;
-  width: ${props => props.width ?? '3rem'};
+  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;
 `;
 
 interface FiltersMenuProps extends ReturnType<typeof useBrowserControls> {
@@ -28,9 +33,14 @@ export default function FiltersControl(props: FiltersMenuProps) {
     width,
     onChangeToFilters,
     clearedTagItem,
-    setClearedTagItem,
+    setClearedTagItem
   } = props;
 
+  const controlsRef = useRef<HTMLDivElement>(null);
+  const [controlsHeight, setControlsHeight] =  useState<number>(0);
+  const { isHeaderHidden, wrapperHeight } = useSlidingStickyHeader();
+
+
   const handleChanges = useCallback((item: OptionItem) => {
     if(allSelected.some((selected) => selected.id == item.id && selected.taxonomy == item.taxonomy)) {
       setClearedTagItem?.(undefined);
@@ -42,29 +52,49 @@ export default function FiltersControl(props: FiltersMenuProps) {
     }
   }, [allSelected, setClearedTagItem, onChangeToFilters]);
 
-  return (
-    <ControlsWrapper width={width}>
-      <SearchField
-        size='large'
-        placeholder='Search by title, description'
-        value={search ?? ''}
-        onChange={(v) => onAction(Actions.SEARCH, v)}
-      />
-      {
-        taxonomiesOptions.map((taxonomy) => {
-          const items = taxonomy.values.map((t) => ({...t, taxonomy: taxonomy.name}));
-          return (
-            <CheckableFilters 
-              key={taxonomy.name}
-              items={items}
-              title={taxonomy.name}
-              onChanges={handleChanges}
-              globallySelected={allSelected}
-              tagItemCleared={{item: clearedTagItem, callback: setClearedTagItem}}
-            />
-          );
-        })
+  useEffect(() => {
+    if (!controlsRef.current) return;
+
+    const height = controlsRef.current.offsetHeight;
+    setControlsHeight(height);
+    // Observe the height change of controls (from accordion folding)
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      if (entry.borderBoxSize.length > 0) {
+        const borderBoxSize = entry.borderBoxSize[0];
+         // blockSize: For boxes with a horizontal writing-mode, this is the vertical dimension
+        setControlsHeight(borderBoxSize.blockSize);
       }
+    });
+    resizeObserver.observe(controlsRef.current);
+    return () => resizeObserver.disconnect(); // clean up 
+  }, [controlsRef]);
+
+
+  return (
+    <ControlsWrapper widthValue={width} heightValue={controlsHeight+'px'} topValue={isHeaderHidden? '0px': `${wrapperHeight}px`}>
+      <div ref={controlsRef}>
+        <SearchField
+          size='large'
+          placeholder='Search by title, description'
+          value={search ?? ''}
+          onChange={(v) => onAction(Actions.SEARCH, v)}
+        />
+        {
+          taxonomiesOptions.map((taxonomy) => {
+            const items = taxonomy.values.map((t) => ({...t, taxonomy: taxonomy.name}));
+            return (
+              <CheckableFilters 
+                key={taxonomy.name}
+                items={items}
+                title={taxonomy.name}
+                onChanges={handleChanges}
+                globallySelected={allSelected}
+                tagItemCleared={{item: clearedTagItem, callback: setClearedTagItem}}
+              />
+            );
+          })
+        }
+      </div>
     </ControlsWrapper>
   );
-}
+}