perf: Optimize Browse page queries

CHANGELOG.md

@@ -11,16 +11,26 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 - Features
   - It's now possible to adjust Combo charts colors 🧑‍🎨
+  - Subthemes are now displayed even when organization section is the second one (Browse page)
 - Fixes
   - Color picker in now in sync with selected color palette
+  - Dataset counts should now be correct in all cases
+  - Dataset tags now wrap
+  - It's now possible to de-select only one filter when both themes and organizations are filtered (Browse page)
+  - Search string is now correctly persisted in search box when refreshing the page (Browse page)
+  - Fixed issue with two queries being sent when refreshing the page when search string was entered (Browse page)
+  - Fixed issue with filtering / unfiltering subthemes that resulted in 404 error (Browse page)
 - Performance
+  - Improved performance of searching for and retrieving datasets (Browse page)
+  - Cubes, themes and organizations queries aren't fired anymore when previewing a dataset
   - Improved the performance of data download
   - (min|max)Inclusive values stored in `sh:or` are now also retrieved
 - Style
   - Color picker's design has been adjusted to be more user-friendly
   - Map now outlines shapes on hover, instead of changing their colors
 - Maintenance
   - Added retrieval of dimension units via `qudt:hasUnit` (but kept `qudt:unit` for backward compatibility)
+  - Improved GQL debug panel (added resolver variables and rectangles to visually indicate resolving times)
 
 # [3.23.0] - 2023-10-17
 

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 {
-  DataCubeResultOrder,
-  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";
@@ -87,15 +81,19 @@ const useQueryParamsState = <T extends object>(
         : undefined;
     const dataset = extractParamFromPath(router.asPath, "dataset");
     const query = sp ? Object.fromEntries(sp.entries()) : undefined;
+
     if (dataset && query && !query.dataset) {
       query.dataset = dataset[0];
     }
+
     return query ? parse(query) : initialState;
   });
 
   useEffect(() => {
-    rawSetState(parse(router.query));
-  }, [parse, router.query]);
+    if (router.isReady) {
+      rawSetState(parse(router.query));
+    }
+  }, [parse, router.isReady, router.query]);
 
   const setState = useEvent((stateUpdate: T) => {
     rawSetState((curState) => {
@@ -110,32 +108,14 @@ const useQueryParamsState = <T extends object>(
 };
 
 export const useBrowseState = () => {
-  const { dataSource } = useDataSourceStore();
-  const locale = useLocale();
   const inputRef = useRef<HTMLInputElement>(null);
-  const [{ data: themeData }] = useThemesQuery({
-    variables: {
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-    },
-  });
-  const [{ data: orgData }] = useOrganizationsQuery({
-    variables: {
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-    },
-  });
-
   const [browseParams, setParams] = useQueryParamsState(
     {},
     {
       parse: getBrowseParamsFromQuery,
       serialize: buildURLFromBrowseState,
     }
   );
-
   const {
     search,
     type,
@@ -147,22 +127,19 @@ export const useBrowseState = () => {
 
   // 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) =>
     setParams({ includeDrafts: v })
   );
-  const setOrder = useEvent((v: DataCubeResultOrder) =>
+  const setOrder = useEvent((v: SearchCubeResultOrder) =>
     setParams({ order: v })
   );
   const setDataset = useEvent((v: string) => setParams({ dataset: v }));
 
-  const previousOrderRef = useRef<DataCubeResultOrder>(
-    DataCubeResultOrder.Score
+  const previousOrderRef = useRef<SearchCubeResultOrder>(
+    SearchCubeResultOrder.Score
   );
 
   return useMemo(
@@ -171,20 +148,20 @@ export const useBrowseState = () => {
       includeDrafts: !!includeDrafts,
       setIncludeDrafts,
       onReset: () => {
-        setParams({ search: "", order: DataCubeResultOrder.CreatedDesc });
+        setParams({ search: "", order: SearchCubeResultOrder.CreatedDesc });
       },
       onSubmitSearch: (newSearch: string) => {
         setParams({
           search: newSearch,
           order:
             newSearch === ""
-              ? DataCubeResultOrder.CreatedDesc
+              ? SearchCubeResultOrder.CreatedDesc
               : previousOrderRef.current,
         });
       },
       search,
       order,
-      onSetOrder: (order: DataCubeResultOrder) => {
+      onSetOrder: (order: SearchCubeResultOrder) => {
         previousOrderRef.current = order;
         setOrder(order);
       },

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([]);
   });
 });