Data Catalog enhancement with floating filter sidebar

app/scripts/components/analysis/results/chart-card.tsx

@@ -37,13 +37,9 @@ import AnalysisMetricsDropdown, {
 } from './analysis-metrics-dropdown';
 
 import {
-  CardSelf,
-  CardHeader,
-  CardHeadline,
-  CardTitle,
-  CardActions,
-  CardBody
+  CardItem
 } from '$components/common/card';
+import { CardHeader, CardHeadline, CardActions, CardTitle, CardBody } from '$components/common/card/styles';
 import Chart, { AnalysisChartRef } from '$components/common/chart/analysis';
 import { ChartLoading } from '$components/common/loading-skeleton';
 import { dateFormatter } from '$components/common/chart/utils';
@@ -189,7 +185,7 @@ export default function ChartCard(props: ChartCardProps) {
   );
 
   return (
-    <CardSelf>
+    <CardItem>
       <CardHeader>
         <CardHeadline>
           <CardTitle>{title}</CardTitle>
@@ -298,6 +294,6 @@ export default function ChartCard(props: ChartCardProps) {
           )
         ) : null}
       </CardBody>
-    </CardSelf>
+    </CardItem>
   );
 }

app/scripts/components/analysis/results/index.tsx

@@ -21,7 +21,7 @@ import {
 import ChartCard from './chart-card';
 import AnalysisHead from './analysis-head';
 import { LayoutProps } from '$components/common/layout-root';
-import { CardList } from '$components/common/card';
+import { CardListGrid } from '$components/common/card/styles';
 import {
   Fold,
   FoldHeader,
@@ -36,7 +36,7 @@ import { pluralize } from '$utils/pluralize';
 import { calcFeatCollArea } from '$components/common/aoi/utils';
 import { ANALYSIS_PATH, ANALYSIS_RESULTS_PATH } from '$utils/routes';
 
-const ChartCardList = styled(CardList)`
+const ChartCardList = styled(CardListGrid)`
   > li {
     min-width: 0;
   }

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

@@ -89,7 +89,7 @@ function BrowseControls(props: BrowseControlsProps) {
         key={name}
         prefix={name}
         items={[optionAll].concat(values)}
-        currentId={taxonomies?.[name] ?? 'all'}
+        currentId={(taxonomies?.[name] as string) || 'all'}
         onChange={(v) => {
           onAction(Actions.TAXONOMY, { key: name, value: v });
         }}

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

@@ -8,7 +8,8 @@ export enum Actions {
   SEARCH = 'search',
   SORT_FIELD = 'sfield',
   SORT_DIR = 'sdir',
-  TAXONOMY = 'taxonomy'
+  TAXONOMY = 'taxonomy',
+  TAXONOMY_MULTISELECT = 'taxonomy_multiselect',
 }
 
 export type BrowserControlsAction = (what: Actions, value?: any) => void;
@@ -79,12 +80,12 @@ export function useBrowserControls({ sortOptions }: BrowseControlsHookParams) {
     []
   );
 
-  const [taxonomies, setTaxonomies] = useQsState.memo<Record<string, string>>(
+  const [taxonomies, setTaxonomies] = useQsState.memo<Record<string, string | string[]>>(
     {
       key: Actions.TAXONOMY,
       default: {},
-      dehydrator: (v) => JSON.stringify(v),
-      hydrator: (v) => (v ? JSON.parse(v) : {})
+      dehydrator: (v) => JSON.stringify(v), // dehydrator defines how a value is stored in the url
+      hydrator: (v) => (v ? JSON.parse(v) : {}) // hydrator defines how a value is read from the url
     },
     []
   );
@@ -115,7 +116,26 @@ export function useBrowserControls({ sortOptions }: BrowseControlsHookParams) {
             }
           }
           break;
+        case Actions.TAXONOMY_MULTISELECT:
+          {
+            const { key, value: val } = value;
+            if (taxonomies && (key in taxonomies)) { // If taxonomy group currently present
+              const taxonomyGroupValues = taxonomies[key] instanceof Array ? (taxonomies[key] as string[]) : [taxonomies[key]];
+
+              if (taxonomyGroupValues.includes(val)) { // If val exists, then remove
+                const updatedValues = taxonomyGroupValues.filter((x) => x !== val);
+                updatedValues.length ? setTaxonomies(set({ ...taxonomies }, key, updatedValues)) : setTaxonomies(omit(taxonomies, key));
+              } else { // else add
+                taxonomyGroupValues.push(val);
+                setTaxonomies(taxonomies);
+              }
+            } else { // Taxonomy group currently not present
+              setTaxonomies(set({ ...taxonomies }, key, [val]));
+            }
+          }
+          break;
       }
+
     },
     [setSortField, setSortDir, taxonomies, setTaxonomies, setSearch]
   );

app/scripts/components/common/card/horizontal-info-card.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import {
+  glsp,
+  themeVal,
+} from '@devseed-ui/theme-provider';
+import { CardTitle } from './styles';
+import { variableBaseType } from '$styles/variable-utils';
+import { Pill } from '$styles/pill';
+
+const HorizontalCard = styled.div`
+  display: flex;
+  height: inherit;
+`;
+
+const CardImage = styled.div`
+  min-width: 10rem;
+  width: 10rem;
+  height: 100%;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const CardContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 1rem;
+`;
+
+export const HorizontalCardStyles = css`
+  height: 10rem;
+  color: ${themeVal('color.base-800')};
+
+  ${CardTitle} {
+    font-size: ${variableBaseType('0.7rem')};
+  }
+
+  #description {
+    font-size: ${variableBaseType('0.6rem')};
+    height: 3rem;
+    margin: 0.5rem 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    /* stylelint-disable-next-line value-no-vendor-prefix */
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* number of lines to show */
+            line-clamp: 2;
+
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-box-orient: vertical;
+  }
+
+  #tags {
+    display: flex;
+    gap: ${glsp(0.5)};
+  }
+`;
+
+interface Props {
+  title: JSX.Element | string;
+  description?: JSX.Element | string;
+  imgSrc?: string;
+  imgAlt?: string;
+  tagLabels?: string[];
+}
+
+export default function HorizontalInfoCard(props: Props) {
+    const {
+    title,
+    description,
+    imgSrc,
+    imgAlt,
+    tagLabels,
+  } = props;
+
+  return (
+    <HorizontalCard>
+      <CardImage>
+        <img src={imgSrc} alt={imgAlt} loading='lazy' />
+      </CardImage>
+      <CardContent>
+        <CardTitle>{title}</CardTitle>
+        <div id='description'>
+          <p>{description}</p>
+        </div>
+        <div id='tags'>
+          {
+            tagLabels && (
+              tagLabels.map((label) => (
+                <Pill variation='primary' key={label}>
+                  {label}
+                </Pill>
+              ))
+            )
+          }
+        </div>
+      </CardContent>
+    </HorizontalCard>
+  );
+}