Merge pull request #1554 from visualize-admin/fix/concept-filters-in-drawer

fix: Filtering by termsets

Author: bprusinowski

app/browser/context.tsx

@@ -209,11 +209,12 @@ const createUseBrowseState = ({ syncWithUrl }: { syncWithUrl: boolean }) => {
         dataset,
         setDataset,
         filters,
-        setFilters: (filters: BrowseFilter[]) =>
+        setFilters: (filters: BrowseFilter[]) => {
           setParams((params) => ({
             ...params,
             ...getParamsFromFilters(filters),
-          })),
+          }));
+        },
       }),
       [
         includeDrafts,

app/browser/dataset-browse.tsx

@@ -690,9 +690,11 @@ const NavSection = ({
 const TermsetNavSection = ({
   currentFilter,
   termsetCounts,
+  disableLinks,
 }: {
   currentFilter: Termset | undefined;
   termsetCounts: { termset: Termset; count: number }[];
+  disableLinks: boolean;
 }) => {
   const { counts, termsets } = useMemo(() => {
     const termsets = termsetCounts.map((x) => x.termset) ?? [];
@@ -719,6 +721,7 @@ const TermsetNavSection = ({
       label={<Trans id="browse-panel.termsets">Concepts</Trans>}
       filters={[]}
       counts={counts}
+      disableLinks={disableLinks}
     />
   );
 };
@@ -872,6 +875,7 @@ export const SearchFilters = ({
       <TermsetNavSection
         termsetCounts={termsetCounts ?? []}
         currentFilter={termsetFilter}
+        disableLinks={disableNavLinks}
       />
     );
   const navs = sortBy(

app/browser/filters.tsx

@@ -66,16 +66,25 @@ export const getParamsFromFilters = (filters: BrowseFilter[]) => {
   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;
+    switch (filter.__typename) {
+      case "DataCubeTheme":
+        params[typeAttr] = "theme";
+        params[iriAttr] = filter.iri;
+        break;
+      case "DataCubeOrganization":
+        params[typeAttr] = "organization";
+        params[iriAttr] = filter.iri;
+        break;
+      case "DataCubeAbout":
+        params.topic = filter.iri;
+        break;
+      case "Termset":
+        params[typeAttr] = "termset";
+        params[iriAttr] = filter.iri;
+        break;
+      default:
+        const _exhaustiveCheck: never = filter;
+        return _exhaustiveCheck;
     }
     i++;
   }

app/browser/select-dataset-step.tsx

@@ -10,6 +10,11 @@ import { Router, useRouter } from "next/router";
 import React, { useMemo } from "react";
 import { useDebounce } from "use-debounce";
 
+import {
+  BrowseStateProvider,
+  buildURLFromBrowseState,
+  useBrowseContext,
+} from "@/browser/context";
 import {
   DatasetResults,
   DatasetResultsProps,
@@ -18,6 +23,7 @@ import {
   SearchFilters,
 } from "@/browser/dataset-browse";
 import { DataSetPreview, DataSetPreviewProps } from "@/browser/dataset-preview";
+import { BrowseFilter, DataCubeAbout } from "@/browser/filters";
 import { useSearchPageData } from "@/browser/search-page-data";
 import { DatasetMetadata } from "@/components/dataset-metadata";
 import Flex from "@/components/flex";
@@ -48,13 +54,6 @@ import {
 import { Icon } from "@/icons";
 import { useConfiguratorState, useLocale } from "@/src";
 
-import {
-  BrowseStateProvider,
-  buildURLFromBrowseState,
-  useBrowseContext,
-} from "./context";
-import { BrowseFilter, DataCubeAbout } from "./filters";
-
 const softJSONParse = (v: string) => {
   try {
     return JSON.parse(v);
@@ -75,20 +74,18 @@ const useStyles = makeStyles<
     margin: "auto",
     position: "static",
     marginTop: ({ datasetPresent, variant }) =>
-      datasetPresent && variant !== "drawer" ? 96 : 0,
+      datasetPresent && variant !== "drawer" ? BANNER_MARGIN_TOP : 0,
     height: "auto",
     transition: "margin-top 0.5s ease",
   },
   panelLeft: {
     // To prevent weird look when dataset metadata is loading
-    minHeight: "calc(100vh - 96px)",
+    minHeight: `calc(100vh - ${BANNER_MARGIN_TOP}px)`,
     backgroundColor: "transparent",
     paddingTop: ({ datasetPresent }) =>
       datasetPresent ? 48 : theme.spacing(5),
     boxShadow: "none",
-    borderRightColor: theme.palette.grey[300],
-    borderRightStyle: "solid",
-    borderRightWidth: 1,
+    borderRight: `1px solid ${theme.palette.grey[300]}`,
     transition: "padding-top 0.5s ease",
   },
   panelMiddle: {

app/pages/browse/index.tsx

@@ -4,8 +4,8 @@ import { ConfiguratorStateProvider } from "@/configurator/configurator-state";
 import { SearchCubeResultOrder } from "@/graphql/query-hooks";
 
 export type BrowseParams = {
-  type?: "theme" | "organization" | "dataset";
-  subtype?: "theme" | "organization";
+  type?: "theme" | "organization" | "dataset" | "termset";
+  subtype?: "theme" | "organization" | "termset";
   iri?: string;
   subiri?: string;
   topic?: string;