Make content filters dynamic

app/scripts/components/analysis/page-hero-analysis.tsx

@@ -125,7 +125,7 @@ const PageHeroSelf = styled.div<PageHeroSelfProps>`
   }
 `;
 
-const PageHeroInner = styled(Constrainer)`
+const PageHeroInner = styled(Constrainer)<{ isStuck: boolean }>`
   align-items: end;
   transition: padding ${HEADER_TRANSITION_DURATION}ms ease-out;
 

app/scripts/components/common/browse-controls/index.tsx

@@ -1,43 +1,48 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Taxonomy } from 'veda';
 import { Overline } from '@devseed-ui/typography';
 import { Button, ButtonProps } from '@devseed-ui/button';
 import {
   CollecticonChevronDownSmall,
   CollecticonChevronUpSmall
 } from '@devseed-ui/collecticons';
-import { glsp, media, truncated } from '@devseed-ui/theme-provider';
+import { glsp, truncated } from '@devseed-ui/theme-provider';
 import { DropMenu, DropTitle } from '@devseed-ui/dropdown';
-import { ShadowScrollbar } from '@devseed-ui/shadow-scrollbar';
 
 import {
   Actions,
   FilterOption,
+  optionAll,
   sortDirOptions,
   useBrowserControls
 } from './use-browse-controls';
 
 import DropdownScrollable from '$components/common/dropdown-scrollable';
 import DropMenuItemButton from '$styles/drop-menu-item-button';
 import { variableGlsp } from '$styles/variable-utils';
-import { FoldHeadActions } from '$components/common/fold';
 import SearchField from '$components/common/search-field';
 import { useMediaQuery } from '$utils/use-media-query';
 
-const BrowseControlsWrapper = styled(FoldHeadActions)`
-  .search-field {
-    order: -1;
-  }
+const BrowseControlsWrapper = styled.div`
+  display: flex;
+  flex-flow: column;
+  gap: ${variableGlsp(0.5)};
+`;
 
-  ${media.largeUp`
-    .search-field {
-      order: initial;
-    }
-  `}
+const SearchWrapper = styled.div`
+  display: flex;
+  gap: ${variableGlsp(0.5)};
 `;
 
-const BrowseControlsShadowScrollbar = styled(ShadowScrollbar)`
-  min-width: 0;
+const TaxonomyWrapper = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  gap: ${variableGlsp(0.5)};
+
+  > * {
+    flex-shrink: 0;
+  }
 `;
 
 const DropButton = styled(Button)`
@@ -57,32 +62,15 @@ const ButtonPrefix = styled(Overline).attrs({ as: 'small' })`
   white-space: nowrap;
 `;
 
-const ShadowScrollbarInner = styled.div`
-  display: flex;
-  flex-flow: row nowrap;
-  gap: ${variableGlsp(0.5)};
-
-  > * {
-    flex-shrink: 0;
-  }
-`;
-
 interface BrowseControlsProps extends ReturnType<typeof useBrowserControls> {
-  topicsOptions: FilterOption[];
-  sourcesOptions: FilterOption[];
+  taxonomiesOptions: Taxonomy[];
   sortOptions: FilterOption[];
 }
 
-const shadowScrollbarProps = {
-  autoHeight: true
-};
-
 function BrowseControls(props: BrowseControlsProps) {
   const {
-    topic,
-    source,
-    topicsOptions,
-    sourcesOptions,
+    taxonomiesOptions,
+    taxonomies,
     sortOptions,
     search,
     sortField,
@@ -97,95 +85,89 @@ function BrowseControls(props: BrowseControlsProps) {
 
   return (
     <BrowseControlsWrapper {...rest}>
-      <BrowseControlsShadowScrollbar
-        scrollbarsProps={shadowScrollbarProps}
-        bottomShadowVariation='none'
-        topShadowVariation='none'
-      >
-        <ShadowScrollbarInner>
-          <DropdownOptions
-            prefix='Topic'
-            items={topicsOptions}
-            currentId={topic}
-            size={isLargeUp ? 'large' : 'medium'}
-            onChange={(v) => onAction(Actions.TOPIC, v)}
-          />
+      <SearchWrapper>
+        <SearchField
+          size={isLargeUp ? 'large' : 'medium'}
+          placeholder='Title, description...'
+          keepOpen={isLargeUp}
+          value={search ?? ''}
+          onChange={(v) => onAction(Actions.SEARCH, v)}
+        />
+        <DropdownScrollable
+          alignment='left'
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          triggerElement={({ active, className, ...rest }) => (
+            <DropButton
+              variation='base-outline'
+              size={isLargeUp ? 'large' : 'medium'}
+              active={active}
+              {...rest}
+            >
+              <ButtonPrefix>Sort by</ButtonPrefix>
+              <span>{currentSortField.name}</span>{' '}
+              {active ? (
+                <CollecticonChevronUpSmall />
+              ) : (
+                <CollecticonChevronDownSmall />
+              )}
+            </DropButton>
+          )}
+        >
+          <DropTitle>Options</DropTitle>
+          <DropMenu>
+            {sortOptions.map((t) => (
+              <li key={t.id}>
+                <DropMenuItemButton
+                  active={t.id === sortField}
+                  data-dropdown='click.close'
+                  onClick={() => onAction(Actions.SORT_FIELD, t.id)}
+                >
+                  {t.name}
+                </DropMenuItemButton>
+              </li>
+            ))}
+          </DropMenu>
+          <DropMenu>
+            {sortDirOptions.map((t) => (
+              <li key={t.id}>
+                <DropMenuItemButton
+                  active={t.id === sortDir}
+                  data-dropdown='click.close'
+                  onClick={() => onAction(Actions.SORT_DIR, t.id)}
+                >
+                  {t.name}
+                </DropMenuItemButton>
+              </li>
+            ))}
+          </DropMenu>
+        </DropdownScrollable>
+      </SearchWrapper>
+      <TaxonomyWrapper>
+        {taxonomiesOptions.map(({ name, values }) => (
           <DropdownOptions
-            prefix='Source'
-            items={sourcesOptions}
-            currentId={source}
+            key={name}
+            prefix={name}
+            items={[optionAll].concat(values)}
+            currentId={taxonomies?.[name] ?? 'all'}
+            onChange={(v) => {
+              onAction(Actions.TAXONOMY, { key: name, value: v });
+            }}
             size={isLargeUp ? 'large' : 'medium'}
-            onChange={(v) => onAction(Actions.SOURCE, v)}
           />
-          <SearchField
-            size={isLargeUp ? 'large' : 'medium'}
-            placeholder='Title, description...'
-            keepOpen={isLargeUp}
-            value={search ?? ''}
-            onChange={(v) => onAction(Actions.SEARCH, v)}
-          />
-          <DropdownScrollable
-            alignment='right'
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            triggerElement={({ active, className, ...rest }) => (
-              <DropButton
-                variation='base-outline'
-                size={isLargeUp ? 'large' : 'medium'}
-                active={active}
-                {...rest}
-              >
-                <ButtonPrefix>Sort by</ButtonPrefix>
-                <span>{currentSortField.name}</span>{' '}
-                {active ? (
-                  <CollecticonChevronUpSmall />
-                ) : (
-                  <CollecticonChevronDownSmall />
-                )}
-              </DropButton>
-            )}
-          >
-            <DropTitle>Options</DropTitle>
-            <DropMenu>
-              {sortOptions.map((t) => (
-                <li key={t.id}>
-                  <DropMenuItemButton
-                    active={t.id === sortField}
-                    data-dropdown='click.close'
-                    onClick={() => onAction(Actions.SORT_FIELD, t.id)}
-                  >
-                    {t.name}
-                  </DropMenuItemButton>
-                </li>
-              ))}
-            </DropMenu>
-            <DropMenu>
-              {sortDirOptions.map((t) => (
-                <li key={t.id}>
-                  <DropMenuItemButton
-                    active={t.id === sortDir}
-                    data-dropdown='click.close'
-                    onClick={() => onAction(Actions.SORT_DIR, t.id)}
-                  >
-                    {t.name}
-                  </DropMenuItemButton>
-                </li>
-              ))}
-            </DropMenu>
-          </DropdownScrollable>
-        </ShadowScrollbarInner>
-      </BrowseControlsShadowScrollbar>
+        ))}
+      </TaxonomyWrapper>
     </BrowseControlsWrapper>
   );
 }
 
 export default styled(BrowseControls)`
-/* Convert to styled-component: https://styled-components.com/docs/advanced#caveat */
+  /* Convert to styled-component: https://styled-components.com/docs/advanced#caveat */
 `;
 
 interface DropdownOptionsProps {
   size: ButtonProps['size'];
   items: FilterOption[];
-  currentId: string | null;
+  currentId?: string;
   onChange: (value: FilterOption['id']) => void;
   prefix: string;
 }

app/scripts/components/common/browse-controls/use-browse-controls.ts

@@ -1,13 +1,13 @@
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router';
 import useQsStateCreator from 'qs-state-hook';
+import { set, omit } from 'lodash';
 
 export enum Actions {
   SEARCH = 'search',
   SORT_FIELD = 'sfield',
   SORT_DIR = 'sdir',
-  TOPIC = 'topic',
-  SOURCE = 'source'
+  TAXONOMY = 'taxonomy'
 }
 
 export type BrowserControlsAction = (what: Actions, value: any) => void;
@@ -18,8 +18,6 @@ export interface FilterOption {
 }
 
 interface BrowseControlsHookParams {
-  topicsOptions: FilterOption[];
-  sourcesOptions: FilterOption[];
   sortOptions: FilterOption[];
 }
 
@@ -39,11 +37,7 @@ export const optionAll = {
   name: 'All'
 };
 
-export function useBrowserControls({
-  topicsOptions,
-  sourcesOptions,
-  sortOptions
-}: BrowseControlsHookParams) {
+export function useBrowserControls({ sortOptions }: BrowseControlsHookParams) {
   // Setup Qs State to store data in the url's query string
   // react-router function to get the navigation.
   const navigate = useNavigate();
@@ -77,22 +71,14 @@ export function useBrowserControls({
     []
   );
 
-  const [topic, setTopic] = useQsState.memo(
+  const [taxonomies, setTaxonomies] = useQsState.memo<Record<string, string>>(
     {
-      key: Actions.TOPIC,
-      default: topicsOptions[0].id,
-      validator: topicsOptions.map((d) => d.id)
+      key: Actions.TAXONOMY,
+      default: {},
+      dehydrator: (v) => JSON.stringify(v),
+      hydrator: (v) => (v ? JSON.parse(v) : {})
     },
-    [topicsOptions]
-  );
-
-  const [source, setSource] = useQsState.memo(
-    {
-      key: Actions.SOURCE,
-      default: sourcesOptions[0].id,
-      validator: sourcesOptions.map((d) => d.id)
-    },
-    [sourcesOptions]
+    []
   );
 
   const onAction = useCallback<BrowserControlsAction>(
@@ -107,23 +93,26 @@ export function useBrowserControls({
         case Actions.SORT_DIR:
           setSortDir(value);
           break;
-        case Actions.TOPIC:
-          setTopic(value);
-          break;
-        case Actions.SOURCE:
-          setSource(value);
+        case Actions.TAXONOMY:
+          {
+            const { key, value: val } = value;
+            if (val === optionAll.id) {
+              setTaxonomies(omit(taxonomies, key));
+            } else {
+              setTaxonomies(set({ ...taxonomies }, key, val));
+            }
+          }
           break;
       }
     },
-    [setSortField, setSortDir, setTopic, setSource, setSearch]
+    [setSortField, setSortDir, taxonomies, setTaxonomies, setSearch]
   );
 
   return {
     search,
     sortField,
     sortDir,
-    topic,
-    source,
+    taxonomies,
     onAction
   };
 }

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

@@ -51,7 +51,11 @@ export function CardSourcesList(props: SourcesListProps) {
         {sources.map((source) => (
           <li key={source.id}>
             <Link
-              to={`${rootPath}?${Actions.SOURCE}=${source.id}`}
+              to={`${rootPath}?${Actions.TAXONOMY}=${encodeURIComponent(
+                JSON.stringify({
+                  Source: source.id
+                })
+              )}`}
               onClick={(e) => {
                 e.preventDefault();
                 onSourceClick(source.id);