perf: Do not query themes and organizations separately

visualize-admin · Oct 31, 2023 · 28b1dea · 28b1dea
1 parent 056c640
commit 28b1dea
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 352 deletions.
diff --git a/app/browser/context.tsx b/app/browser/context.tsx
@@ -7,14 +7,8 @@ import Link from "next/link";
 import { Router, useRouter } from "next/router";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 
-import {
-  SearchCubeResultOrder,
-  useOrganizationsQuery,
-  useThemesQuery,
-} from "@/graphql/query-hooks";
-import { useLocale } from "@/locales/use-locale";
+import { SearchCubeResultOrder } from "@/graphql/query-hooks";
 import { BrowseParams } from "@/pages/browse";
-import { useDataSourceStore } from "@/stores/data-source";
 import useEvent from "@/utils/use-event";
 
 import { getFiltersFromParams } from "./filters";
@@ -114,18 +108,14 @@ const useQueryParamsState = <T extends object>(
 };
 
 export const useBrowseState = () => {
-  const { dataSource } = useDataSourceStore();
-  const locale = useLocale();
   const inputRef = useRef<HTMLInputElement>(null);
-
   const [browseParams, setParams] = useQueryParamsState(
     {},
     {
       parse: getBrowseParamsFromQuery,
       serialize: buildURLFromBrowseState,
     }
   );
-
   const {
     search,
     type,
@@ -135,29 +125,9 @@ export const useBrowseState = () => {
     dataset: paramDataset,
   } = browseParams;
 
-  const [{ data: themeData }] = useThemesQuery({
-    variables: {
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-    },
-    pause: !!paramDataset,
-  });
-  const [{ data: orgData }] = useOrganizationsQuery({
-    variables: {
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-    },
-    pause: !!paramDataset,
-  });
-
   // Support /browse?dataset=<iri> and legacy /browse/dataset/<iri>
   const dataset = type === "dataset" ? iri : paramDataset;
-  const filters = getFiltersFromParams(browseParams, {
-    themes: themeData?.themes,
-    organizations: orgData?.organizations,
-  });
+  const filters = getFiltersFromParams(browseParams);
 
   const setSearch = useEvent((v: string) => setParams({ search: v }));
   const setIncludeDrafts = useEvent((v: boolean) =>

diff --git a/app/browser/dataset-browse.spec.tsx b/app/browser/dataset-browse.spec.tsx
@@ -1,30 +1,14 @@
-import { DataCubeOrganization, DataCubeTheme } from "@/graphql/query-hooks";
 import { BrowseParams } from "@/pages/browse";
 
 import { getFiltersFromParams } from "./filters";
 
-const ctx = {
-  themes: [
-    {
-      iri: "https://fake-iri-theme",
-      __typename: "DataCubeTheme",
-    },
-  ] as DataCubeTheme[],
-  organizations: [
-    {
-      iri: "https://fake-iri-organization",
-      __typename: "DataCubeOrganization",
-    },
-  ] as DataCubeOrganization[],
-};
-
 describe("getFiltersFromParams", () => {
   it("should work only for organization", () => {
     const params = {
       type: "organization",
       iri: "https://fake-iri-organization",
     } as BrowseParams;
-    const filters = getFiltersFromParams(params, ctx);
+    const filters = getFiltersFromParams(params);
     expect(filters).toEqual([
       {
         __typename: "DataCubeOrganization",
@@ -40,7 +24,7 @@ describe("getFiltersFromParams", () => {
       subtype: "organization",
       subiri: "https://fake-iri-organization",
     } as BrowseParams;
-    const filters = getFiltersFromParams(params, ctx);
+    const filters = getFiltersFromParams(params);
     expect(filters).toEqual([
       { iri: "https://fake-iri-theme", __typename: "DataCubeTheme" },
       {
@@ -57,7 +41,7 @@ describe("getFiltersFromParams", () => {
       subtype: "theme",
       subiri: "https://fake-iri-theme",
     } as BrowseParams;
-    const filters = getFiltersFromParams(params, ctx);
+    const filters = getFiltersFromParams(params);
     expect(filters).toEqual([
       {
         iri: "https://fake-iri-organization",
@@ -72,7 +56,7 @@ describe("getFiltersFromParams", () => {
       type: "dataset",
       iri: "https://fake-iri-dataset",
     } as BrowseParams;
-    const filters = getFiltersFromParams(params, ctx);
+    const filters = getFiltersFromParams(params);
     expect(filters).toEqual([]);
   });
 });
diff --git a/app/browser/dataset-browse.tsx b/app/browser/dataset-browse.tsx
@@ -39,8 +39,6 @@ import {
   DataCubeTheme,
   SearchCubeResultOrder,
   SearchCubesQuery,
-  useOrganizationsQuery,
-  useThemesQuery,
 } from "@/graphql/query-hooks";
 import {
   DataCubePublicationStatus,
@@ -49,8 +47,6 @@ import {
 import SvgIcCategories from "@/icons/components/IcCategories";
 import SvgIcClose from "@/icons/components/IcClose";
 import SvgIcOrganisations from "@/icons/components/IcOrganisations";
-import { useLocale } from "@/locales/use-locale";
-import { useDataSourceStore } from "@/stores/data-source";
 import isAttrEqual from "@/utils/is-attr-equal";
 import useEvent from "@/utils/use-event";
 
@@ -525,6 +521,7 @@ const NavSection = ({
     );
   }, [counts, items]);
   const { isOpen, open, close } = useDisclosure();
+
   return (
     <div>
       <NavSectionTitle theme={theme} sx={{ mb: "block" }}>
@@ -545,7 +542,7 @@ const NavSection = ({
           return (
             <Reorder.Item drag={false} value={item} key={item.iri} as="div">
               <NavItem
-                active={currentFilter === item}
+                active={currentFilter?.iri === item.iri}
                 filters={filters}
                 next={item}
                 count={counts[item.iri]}
@@ -593,27 +590,16 @@ const NavSection = ({
   );
 };
 
-export const SearchFilters = ({ cubes }: { cubes: SearchCubeResult[] }) => {
-  const { dataSource } = useDataSourceStore();
-  const locale = useLocale();
-  const { filters, dataset } = useBrowseContext();
-  const [{ data: allThemes }] = useThemesQuery({
-    variables: {
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-    },
-    pause: !!dataset,
-  });
-  const [{ data: allOrgs }] = useOrganizationsQuery({
-    variables: {
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-    },
-    pause: !!dataset,
-  });
-
+export const SearchFilters = ({
+  cubes,
+  themes,
+  orgs,
+}: {
+  cubes: SearchCubeResult[];
+  themes: DataCubeTheme[];
+  orgs: DataCubeOrganization[];
+}) => {
+  const { filters } = useBrowseContext();
   const counts = useMemo(() => {
     const result: Record<string, number> = {};
 
@@ -639,14 +625,7 @@ export const SearchFilters = ({ cubes }: { cubes: SearchCubeResult[] }) => {
     isAttrEqual("__typename", "DataCubeOrganization")
   );
 
-  const [allThemesAlpha, allOrgsAlpha] = useMemo(() => {
-    return [
-      allThemes ? sortBy(allThemes.themes, (x) => x?.label) : null,
-      allOrgs ? sortBy(allOrgs.organizations, (x) => x?.label) : null,
-    ];
-  }, [allThemes, allOrgs]);
-
-  const displayedThemes = allThemesAlpha?.filter((theme) => {
+  const displayedThemes = themes.filter((theme) => {
     if (!theme.label) {
       return false;
     }
@@ -655,23 +634,23 @@ export const SearchFilters = ({ cubes }: { cubes: SearchCubeResult[] }) => {
       return false;
     }
 
-    if (themeFilter && themeFilter !== theme) {
+    if (themeFilter && themeFilter.iri !== theme.iri) {
       return false;
     }
 
     return true;
   });
 
-  const displayedOrgs = allOrgsAlpha?.filter((org) => {
+  const displayedOrgs = orgs.filter((org) => {
     if (!org.label) {
       return false;
     }
 
-    if (!counts[org.iri] && orgFilter !== org) {
+    if (!counts[org.iri] && orgFilter?.iri !== org.iri) {
       return false;
     }
 
-    if (orgFilter && orgFilter !== org) {
+    if (orgFilter && orgFilter.iri !== org.iri) {
       return false;
     }
 
@@ -721,7 +700,7 @@ export const SearchFilters = ({ cubes }: { cubes: SearchCubeResult[] }) => {
         icon={<SvgIcOrganisations width={20} height={20} />}
         label={<Trans id="browse-panel.organizations">Organizations</Trans>}
         extra={
-          orgFilter && filters.includes(orgFilter) ? (
+          orgFilter && filters.map((d) => d.iri).includes(orgFilter.iri) ? (
             <Subthemes
               subthemes={subthemes}
               filters={filters}

diff --git a/app/browser/filters.tsx b/app/browser/filters.tsx
@@ -1,9 +1,4 @@
-import {
-  DataCubeOrganization,
-  DataCubeTheme,
-  OrganizationsQuery,
-  ThemesQuery,
-} from "@/graphql/query-hooks";
+import { DataCubeOrganization, DataCubeTheme } from "@/graphql/query-hooks";
 import { BrowseParams } from "@/pages/browse";
 
 export type DataCubeAbout = {
@@ -14,31 +9,21 @@ export type DataCubeAbout = {
 export type BrowseFilter = DataCubeTheme | DataCubeOrganization | DataCubeAbout;
 /** Builds the state search filters from query params */
 
-export const getFiltersFromParams = (
-  params: BrowseParams,
-  context: {
-    themes?: ThemesQuery["themes"];
-    organizations?: OrganizationsQuery["organizations"];
-  }
-) => {
+export const getFiltersFromParams = (params: BrowseParams) => {
   const filters: BrowseFilter[] = [];
   const { type, subtype, iri, subiri, topic } = params;
   for (const [t, i] of [
     [type, iri],
     [subtype, subiri],
   ]) {
     if (t && i && (t === "theme" || t === "organization")) {
-      const container = context[
-        t === "theme" ? "themes" : "organizations"
-      ] as BrowseFilter[];
-      const obj = container?.find((f) => i === f.iri);
-      if (obj) {
-        filters.push(obj);
-      } else {
-        break;
-      }
+      filters.push({
+        __typename: t === "theme" ? "DataCubeTheme" : "DataCubeOrganization",
+        iri: i,
+      });
     }
   }
+
   if (topic) {
     filters.push({
       __typename: "DataCubeAbout",

diff --git a/app/browser/select-dataset-step.tsx b/app/browser/select-dataset-step.tsx
@@ -2,6 +2,8 @@ import { t, Trans } from "@lingui/macro";
 import { Box, Button, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { AnimatePresence } from "framer-motion";
+import sortBy from "lodash/sortBy";
+import uniqBy from "lodash/uniqBy";
 import Head from "next/head";
 import NextLink from "next/link";
 import { Router, useRouter } from "next/router";
@@ -32,7 +34,12 @@ import {
   PanelLeftWrapper,
   PanelMiddleWrapper,
 } from "@/configurator/components/layout";
-import { useSearchCubesQuery } from "@/graphql/query-hooks";
+import { truthy } from "@/domain/types";
+import {
+  DataCubeOrganization,
+  DataCubeTheme,
+  useSearchCubesQuery,
+} from "@/graphql/query-hooks";
 import { Icon } from "@/icons";
 import { useConfiguratorState, useLocale } from "@/src";
 
@@ -206,6 +213,32 @@ const SelectDatasetStepContent = () => {
     };
   }, [data, filters]);
 
+  const themes: DataCubeTheme[] = React.useMemo(() => {
+    return sortBy(
+      uniqBy(
+        cubes
+          .flatMap((d) => d.cube.themes)
+          .map((d) => ({ ...d, __typename: "DataCubeTheme" })),
+        (d) => d.iri
+      ),
+      (d) => d.label
+    );
+  }, [cubes]);
+
+  const orgs: DataCubeOrganization[] = React.useMemo(() => {
+    return sortBy(
+      uniqBy(
+        cubes
+          .map((d) => d.cube.creator)
+          .filter((d) => d?.iri)
+          .filter(truthy)
+          .map((d) => ({ ...d, __typename: "DataCubeOrganization" })),
+        (d) => d.iri
+      ),
+      (d) => d.label
+    );
+  }, [cubes]);
+
   if (configState.state !== "SELECTING_DATASET") {
     return null;
   }
@@ -280,7 +313,7 @@ const SelectDatasetStepContent = () => {
               </MotionBox>
             ) : (
               <MotionBox key="search-filters" {...navPresenceProps}>
-                <SearchFilters cubes={allCubes} />
+                <SearchFilters cubes={allCubes} themes={themes} orgs={orgs} />
               </MotionBox>
             )}
           </AnimatePresence>
@@ -329,7 +362,16 @@ const SelectDatasetStepContent = () => {
                           className={classes.filters}
                           variant="h1"
                         >
-                          {queryFilters.map((d) => d.label).join(", ")}
+                          {queryFilters
+                            .map((d) => {
+                              const searchList =
+                                d.type === "DataCubeTheme" ? themes : orgs;
+                              const item = searchList.find(
+                                ({ iri }) => iri === d.value
+                              );
+                              return (item ?? d).label;
+                            })
+                            .join(", ")}
                         </Typography>
                       </MotionBox>
                     )}