feat: Search filters inside drawer work

app/browser/context.tsx

@@ -21,7 +21,11 @@ import { SearchCubeResultOrder } from "@/graphql/query-hooks";
 import { BrowseParams } from "@/pages/browse";
 import useEvent from "@/utils/use-event";
 
-import { getFiltersFromParams } from "./filters";
+import {
+  BrowseFilter,
+  getFiltersFromParams,
+  getParamsFromFilters,
+} from "./filters";
 
 export const getBrowseParamsFromQuery = (
   query: Router["query"]
@@ -115,7 +119,7 @@ const useQueryParamsState = (initialState: BrowseParams) => {
     if (router.isReady) {
       rawSetState(urlCodec.parse(router.query));
     }
-  }, [urlCodec.parse, router.isReady, router.query]);
+  }, [router.isReady, router.query]);
 
   const setState = useEvent(
     (
@@ -206,6 +210,11 @@ const makeUseBrowseState =
         dataset,
         setDataset,
         filters,
+        setFilters: (filters: BrowseFilter[]) =>
+          setParams((params) => ({
+            ...params,
+            ...getParamsFromFilters(filters),
+          })),
       }),
       [
         includeDrafts,

app/browser/dataset-browse.tsx

@@ -31,6 +31,7 @@ import {
   SearchFieldProps,
 } from "@/components/form";
 import { Loading, LoadingDataError } from "@/components/hint";
+import MaybeLink from "@/components/maybe-link";
 import {
   accordionPresenceProps,
   MotionBox,
@@ -371,6 +372,7 @@ const NavItem = ({
   active,
   theme = defaultNavItemTheme,
   level = 1,
+  disableLink,
 }: {
   children: React.ReactNode;
   filters: BrowseFilter[];
@@ -380,10 +382,12 @@ const NavItem = ({
   theme: typeof defaultNavItemTheme;
   /** Level is there to differentiate between organizations and organization subtopics */
   level?: number;
+  disableLink?: boolean;
 } & MUILinkProps) => {
-  const { includeDrafts, search } = useBrowseContext();
+  const { includeDrafts, search, setFilters } = useBrowseContext();
+  const classes = useNavItemStyles({ level, navItemTheme: theme });
 
-  const path = useMemo(() => {
+  const [newFiltersAdd, path] = useMemo(() => {
     const extraURLParams = stringify(
       pickBy(
         {
@@ -404,12 +408,13 @@ const NavItem = ({
       newFilters.push(next);
     }
 
-    return `/browse/${newFilters
-      .map(encodeFilter)
-      .join("/")}?${extraURLParams}`;
+    return [
+      newFilters,
+      `/browse/${newFilters.map(encodeFilter).join("/")}?${extraURLParams}`,
+    ] as const;
   }, [includeDrafts, search, level, next, filters]);
 
-  const removeFilterPath = useMemo(() => {
+  const [newFiltersRemove, removeFilterPath] = useMemo(() => {
     const extraURLParams = stringify(
       pickBy(
         {
@@ -423,21 +428,31 @@ const NavItem = ({
       (f) => f.__typename !== "DataCubeAbout" && f.iri !== next.iri
     );
 
-    return `/browse/${newFilters
-      .map(encodeFilter)
-      .join("/")}?${extraURLParams}`;
+    return [
+      newFilters,
+      `/browse/${newFilters.map(encodeFilter).join("/")}?${extraURLParams}`,
+    ] as const;
   }, [includeDrafts, search, filters, next.iri]);
 
   const removeFilterButton = (
-    <Link href={removeFilterPath} passHref legacyBehavior>
+    <MaybeLink
+      href={removeFilterPath}
+      passHref
+      legacyBehavior
+      disabled={!!disableLink}
+    >
       <ButtonBase
         component="a"
         className={classes.removeFilterButton}
+        onClick={(ev) => {
+          ev.preventDefault();
+          console.log(newFiltersRemove);
+          setFilters(newFiltersRemove);
         }}
       >
         <SvgIcClose width={24} height={24} />
       </ButtonBase>
-    </Link>
+    </MaybeLink>
   );
 
   const countChip =
@@ -475,15 +490,25 @@ const NavItem = ({
         </>
       ) : (
         <>
-          <Link href={path} passHref legacyBehavior>
+          <MaybeLink
+            href={path}
+            passHref
+            legacyBehavior
+            disabled={!!disableLink}
+          >
             <MUILink
               className={classes.link}
+              href={path}
               underline="none"
               variant="body2"
+              onClick={(ev) => {
+                ev.preventDefault();
+                setFilters(newFiltersAdd);
+              }}
             >
               {children}
             </MUILink>
-          </Link>
+          </MaybeLink>
           {countChip}
         </>
       )}
@@ -568,6 +593,7 @@ const NavSection = ({
   filters,
   counts,
   extra,
+  disableLinks,
 }: {
   label: React.ReactNode;
   icon: React.ReactNode;
@@ -578,6 +604,7 @@ const NavSection = ({
   filters: BrowseFilter[];
   counts: Record<string, number>;
   extra?: React.ReactNode;
+  disableLinks?: boolean;
 }) => {
   const topItems = useMemo(() => {
     return sortBy(
@@ -616,6 +643,7 @@ const NavSection = ({
                 next={item}
                 count={counts[item.iri]}
                 theme={navItemTheme}
+                disableLink={disableLinks}
               >
                 {item.label}
               </NavItem>
@@ -710,11 +738,13 @@ export const SearchFilters = ({
   themes,
   orgs,
   termsets: termsetCounts,
+  disableNavLinks = false,
 }: {
   cubes: SearchCubeResult[];
   themes: DataCubeTheme[];
   orgs: DataCubeOrganization[];
   termsets: TermsetCount[];
+  disableNavLinks?: boolean;
 }) => {
   const { filters } = useBrowseContext();
   const counts = useMemo(() => {
@@ -797,6 +827,7 @@ export const SearchFilters = ({
         icon={<SvgIcCategories width={20} height={20} />}
         label={<Trans id="browse-panel.themes">Themes</Trans>}
         extra={null}
+        disableLinks={disableNavLinks}
       />
     ) : null;
 
@@ -834,6 +865,7 @@ export const SearchFilters = ({
             />
           ) : null
         }
+        disableLinks={disableNavLinks}
       />
     ) : null;
 

app/browser/filters.tsx

@@ -53,3 +53,31 @@ export const getFiltersFromParams = (params: BrowseParams) => {
 
   return filters;
 };
+
+export const getParamsFromFilters = (filters: BrowseFilter[]) => {
+  const params: BrowseParams = {
+    type: undefined,
+    subtype: undefined,
+    iri: undefined,
+    subiri: undefined,
+    topic: undefined,
+  };
+  let i = 0;
+  for (const filter of filters) {
+    const typeAttr = i === 0 ? "type" : ("subtype" as const);
+    const iriAttr = i === 0 ? "iri" : ("subiri" as const);
+    if (filter.__typename === SearchCubeFilterType.DataCubeTheme) {
+      params[typeAttr] = "theme";
+      params[iriAttr] = filter.iri;
+    } else if (
+      filter.__typename === SearchCubeFilterType.DataCubeOrganization
+    ) {
+      params[typeAttr] = "organization";
+      params[iriAttr] = filter.iri;
+    } else if (filter.__typename === SearchCubeFilterType.DataCubeAbout) {
+      params.topic = filter.iri;
+    }
+    i++;
+  }
+  return params;
+};

app/browser/select-dataset-step.tsx

@@ -386,6 +386,7 @@ const SelectDatasetStepContent = ({
                   themes={themes}
                   orgs={orgs}
                   termsets={termsets}
+                  disableNavLinks
                 />
               </MotionBox>
             )}

app/components/maybe-link.tsx

@@ -0,0 +1,16 @@
+import { Link } from "@mui/material";
+import { LinkProps } from "next/link";
+import React from "react";
+
+/** A link where the default link behavior can be disabled */
+const MaybeLink = ({
+  disabled,
+  children,
+  ...props
+}: LinkProps & { disabled: boolean; children: React.ReactNode }) => {
+  const Wrapper = disabled ? React.Fragment : Link;
+  const wrapperProps = disabled ? {} : props;
+  return <Wrapper {...wrapperProps}>{children}</Wrapper>;
+};
+
+export default MaybeLink;