refactor: Fetch termsets in SearchCubes query

...to make sure all relevant filter are taken into account, and to not have duplicated logic and two very similar queries. This also aligns the termsets logic with organizations and themes in the Browse page.
visualize-admin · Sep 24, 2024 · 02682e8 · 02682e8
1 parent 8fcf5ee
commit 02682e8
Show file tree

Hide file tree

Showing 17 changed files with 212 additions and 333 deletions.
diff --git a/app/browser/dataset-browse.tsx b/app/browser/dataset-browse.tsx
@@ -21,7 +21,7 @@ import uniqBy from "lodash/uniqBy";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { stringify } from "qs";
-import React, { ComponentProps, useMemo, useState } from "react";
+import React, { ComponentProps, ReactNode, useMemo, useState } from "react";
 
 import Flex, { FlexProps } from "@/components/flex";
 import {
@@ -41,15 +41,15 @@ import {
 } from "@/components/presence";
 import Tag from "@/components/tag";
 import useDisclosure from "@/components/use-disclosure";
-import { SearchCube, Termset } from "@/domain/data";
+import { SearchCube } from "@/domain/data";
 import { truthy } from "@/domain/types";
 import { useFlag } from "@/flags";
 import { useFormatDate } from "@/formatters";
 import {
   DataCubeOrganization,
+  DataCubeTermset,
   DataCubeTheme,
   SearchCubeResultOrder,
-  TermsetCount,
 } from "@/graphql/query-hooks";
 import {
   DataCubePublicationStatus,
@@ -355,7 +355,7 @@ const encodeFilter = (filter: BrowseFilter) => {
         return "organization";
       case "DataCubeAbout":
         return "topic";
-      case "Termset":
+      case "DataCubeTermset":
         return "termset";
       default:
         const check: never = __typename;
@@ -375,7 +375,7 @@ const NavItem = ({
   level = 1,
   disableLink,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   filters: BrowseFilter[];
   next: BrowseFilter;
   count?: number;
@@ -611,10 +611,10 @@ const NavSection = ({
 }: {
   label: React.ReactNode;
   icon: React.ReactNode;
-  items: (DataCubeTheme | DataCubeOrganization | Termset)[];
+  items: (DataCubeTheme | DataCubeOrganization | DataCubeTermset)[];
   theme: { backgroundColor: string; borderColor: string };
   navItemTheme: NavItemTheme;
-  currentFilter?: DataCubeTheme | DataCubeOrganization | Termset;
+  currentFilter?: DataCubeTheme | DataCubeOrganization | DataCubeTermset;
   filters: BrowseFilter[];
   counts: Record<string, number>;
   extra?: React.ReactNode;
@@ -705,7 +705,7 @@ const NavSection = ({
 const navOrder: Record<BrowseFilter["__typename"], number> = {
   DataCubeTheme: 1,
   DataCubeOrganization: 2,
-  Termset: 3,
+  DataCubeTermset: 3,
   // Not used in the nav
   DataCubeAbout: 4,
 };
@@ -714,13 +714,13 @@ export const SearchFilters = ({
   cubes,
   themes,
   orgs,
-  termsets: termsetCounts,
+  termsets,
   disableNavLinks = false,
 }: {
   cubes: SearchCubeResult[];
   themes: DataCubeTheme[];
   orgs: DataCubeOrganization[];
-  termsets: TermsetCount[];
+  termsets: DataCubeTermset[];
   disableNavLinks?: boolean;
 }) => {
   const { filters } = useBrowseContext();
@@ -731,6 +731,7 @@ export const SearchFilters = ({
       const countable = [
         ...cube.themes,
         ...cube.subthemes,
+        ...cube.termsets,
         cube.creator,
       ].filter(truthy);
 
@@ -741,22 +742,23 @@ export const SearchFilters = ({
       }
     }
 
-    for (const { termset, count } of termsetCounts) {
-      result[termset.iri] = count;
-    }
-
     return result;
-  }, [cubes, termsetCounts]);
+  }, [cubes]);
 
   const {
     DataCubeTheme: themeFilter,
     DataCubeOrganization: orgFilter,
-    Termset: termsetFilter,
+    DataCubeTermset: termsetFilter,
   } = useMemo(() => {
-    return keyBy(filters, (f) => f.__typename) as {
-      DataCubeTheme?: DataCubeTheme;
-      DataCubeOrganization?: DataCubeOrganization;
-      Termset?: Termset;
+    const result = keyBy(filters, (f) => f.__typename) as {
+      [K in BrowseFilter["__typename"]]?: BrowseFilter;
+    };
+    return {
+      DataCubeTheme: result.DataCubeTheme as DataCubeTheme | undefined,
+      DataCubeOrganization: result.DataCubeOrganization as
+        | DataCubeOrganization
+        | undefined,
+      DataCubeTermset: result.DataCubeTermset as DataCubeTermset | undefined,
     };
   }, [filters]);
 
@@ -792,23 +794,21 @@ export const SearchFilters = ({
     return true;
   });
 
-  const displayedTermsets = termsetCounts
-    .map((d) => d.termset)
-    .filter((termset) => {
-      if (!termset.label) {
-        return false;
-      }
+  const displayedTermsets = termsets.filter((termset) => {
+    if (!termset.label) {
+      return false;
+    }
 
-      if (!counts[termset.iri] && termsetFilter?.iri !== termset.iri) {
-        return false;
-      }
+    if (!counts[termset.iri] && termsetFilter?.iri !== termset.iri) {
+      return false;
+    }
 
-      if (termsetFilter && termsetFilter.iri !== termset.iri) {
-        return false;
-      }
+    if (termsetFilter && termsetFilter.iri !== termset.iri) {
+      return false;
+    }
 
-      return true;
-    });
+    return true;
+  });
 
   const themeNav =
     displayedThemes && displayedThemes.length > 0 ? (
@@ -871,7 +871,7 @@ export const SearchFilters = ({
 
   const termsetFlag = useFlag("search.termsets");
   const termsetNav =
-    termsetCounts.length === 0 || !termsetFlag ? null : (
+    termsets.length === 0 || !termsetFlag ? null : (
       <NavSection
         key="termsets"
         items={displayedTermsets}
@@ -889,21 +889,22 @@ export const SearchFilters = ({
         disableLinks={disableNavLinks}
       />
     );
-  const navs = sortBy(
-    [
-      { element: themeNav, __typename: "DataCubeTheme" },
-      { element: orgNav, __typename: "DataCubeOrganization" },
-      { element: termsetNav, __typename: "Termset" },
-    ],
-    (x) => {
-      const i = filters.findIndex((f) => f.__typename === x.__typename);
-      return i === -1
-        ? // If the filter is not in the list, we want to put it at the end
-          navOrder[x.__typename as BrowseFilter["__typename"]] +
-            Object.keys(navOrder).length
-        : i;
-    }
-  );
+  const baseNavs: {
+    element: ReactNode;
+    __typename: BrowseFilter["__typename"];
+  }[] = [
+    { element: themeNav, __typename: "DataCubeTheme" },
+    { element: orgNav, __typename: "DataCubeOrganization" },
+    { element: termsetNav, __typename: "DataCubeTermset" },
+  ];
+  const navs = sortBy(baseNavs, (x) => {
+    const i = filters.findIndex((f) => f.__typename === x.__typename);
+    return i === -1
+      ? // If the filter is not in the list, we want to put it at the end
+        navOrder[x.__typename as BrowseFilter["__typename"]] +
+          Object.keys(navOrder).length
+      : i;
+  });
 
   return (
     <Flex

diff --git a/app/browser/filters.tsx b/app/browser/filters.tsx
@@ -1,6 +1,6 @@
-import { Termset } from "@/domain/data";
 import {
   DataCubeOrganization,
+  DataCubeTermset,
   DataCubeTheme,
   SearchCubeFilterType,
 } from "@/graphql/query-hooks";
@@ -15,7 +15,7 @@ export type BrowseFilter =
   | DataCubeTheme
   | DataCubeOrganization
   | DataCubeAbout
-  | (Omit<Termset, "label"> & { label?: string });
+  | DataCubeTermset;
 
 /** Builds the state search filters from query params */
 
@@ -35,7 +35,7 @@ export const getFiltersFromParams = (params: BrowseParams) => {
           case "organization":
             return SearchCubeFilterType.DataCubeOrganization;
           case "termset":
-            return SearchCubeFilterType.Termset;
+            return SearchCubeFilterType.DataCubeTermset;
         }
       })();
       filters.push({
@@ -81,7 +81,7 @@ export const getParamsFromFilters = (filters: BrowseFilter[]) => {
       case "DataCubeAbout":
         params.topic = filter.iri;
         break;
-      case "Termset":
+      case "DataCubeTermset":
         params[typeAttr] = "termset";
         params[iriAttr] = filter.iri;
         break;

diff --git a/app/browser/search-page-data.tsx b/app/browser/search-page-data.tsx
diff --git a/app/browser/select-dataset-step.tsx b/app/browser/select-dataset-step.tsx
@@ -24,7 +24,6 @@ import {
 } 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";
 import { Footer } from "@/components/footer";
@@ -46,6 +45,7 @@ import {
 import { truthy } from "@/domain/types";
 import {
   DataCubeOrganization,
+  DataCubeTermset,
   DataCubeTheme,
   SearchCubeFilterType,
   useDataCubeMetadataQuery,
@@ -274,14 +274,17 @@ const SelectDatasetStepContent = ({
     );
   }, [cubes]);
 
-  const searchPageData = useSearchPageData({
-    includeDrafts,
-    filters: queryFilters,
-  });
-  const termsets = useMemo(
-    () => searchPageData.data?.allTermsets ?? [],
-    [searchPageData.data?.allTermsets]
-  );
+  const termsets: DataCubeTermset[] = useMemo(() => {
+    return sortBy(
+      uniqBy(
+        cubes.flatMap((d) =>
+          d.cube.termsets.map((d) => ({ ...d, __typename: "DataCubeTermset" }))
+        ),
+        (d) => d.iri
+      ),
+      (d) => d.label
+    );
+  }, [cubes]);
 
   const pageTitle = useMemo(() => {
     return queryFilters
@@ -293,8 +296,8 @@ const SelectDatasetStepContent = ({
               return themes;
             case SearchCubeFilterType.DataCubeOrganization:
               return orgs;
-            case SearchCubeFilterType.Termset:
-              return termsets.map((x) => x.termset);
+            case SearchCubeFilterType.DataCubeTermset:
+              return termsets;
             case SearchCubeFilterType.DataCubeAbout:
               return [];
             case SearchCubeFilterType.TemporalDimension:

diff --git a/app/components/graphql-search.stories.tsx b/app/components/graphql-search.stories.tsx
@@ -92,7 +92,7 @@ export const Search = () => {
       filters: [
         sharedComponents
           ? {
-              type: SearchCubeFilterType.Termset,
+              type: SearchCubeFilterType.DataCubeTermset,
               value: sharedComponents
                 .map((x) => cubeSharedDimensionsByIri[x])
                 .filter(truthy)

diff --git a/app/configurator/components/add-dataset-dialog.tsx b/app/configurator/components/add-dataset-dialog.tsx
@@ -723,7 +723,7 @@ export const DatasetDialog = ({
           : null,
         selectedSharedDimensions && selectedSharedDimensions.length > 0
           ? {
-              type: SearchCubeFilterType.Termset,
+              type: SearchCubeFilterType.DataCubeTermset,
               value: uniq(
                 selectedSharedDimensions.flatMap((x) =>
                   x.termsets.map((x) => x.iri)

diff --git a/app/domain/data.ts b/app/domain/data.ts
@@ -406,6 +406,10 @@ export type SearchCube = {
     iri: string;
     label: string;
   }[];
+  termsets: {
+    iri: string;
+    label: string;
+  }[];
   dimensions?: {
     iri: string;
     label: string;

diff --git a/app/graphql/queries/data-cubes.graphql b/app/graphql/queries/data-cubes.graphql
@@ -1,22 +1,3 @@
-query SearchPage(
-  $sourceType: String!
-  $sourceUrl: String!
-  $includeDrafts: Boolean
-  $filters: [SearchCubeFilter!]
-  $locale: String!
-) {
-  allTermsets(
-    sourceType: $sourceType
-    sourceUrl: $sourceUrl
-    includeDrafts: $includeDrafts
-    filters: $filters
-    locale: $locale
-  ) {
-    count
-    termset
-  }
-}
-
 query SearchCubes(
   $sourceType: String!
   $sourceUrl: String!