From 718fa144b100dd8bb2e9fe3174da2aec78a31023 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 26 Oct 2023 15:10:09 +0200
Subject: [PATCH] perf: Do not use another query to fetch themes and
 observations

---
 app/browser/dataset-browse.tsx      | 67 +++++++++++++++--------------
 app/browser/select-dataset-step.tsx |  2 +-
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/app/browser/dataset-browse.tsx b/app/browser/dataset-browse.tsx
index cb815d800b..0b0271e543 100644
--- 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";
 
@@ -532,6 +528,7 @@ const NavSection = ({
     );
   }, [counts, items]);
   const { isOpen, open, close } = useDisclosure();
+
   return (
     <div>
       <NavSectionTitle theme={theme} sx={{ mb: "block" }}>
@@ -552,7 +549,7 @@ const NavSection = ({
           return (
             <Reorder.Item drag={false} value={item} key={item.iri} as="div">
               <NavItem
-                active={currentFilter === item}
+                active={currentFilter ? currentFilter.iri === item.iri : false}
                 filters={filters}
                 next={item}
                 count={counts[item.iri]}
@@ -600,29 +597,36 @@ const NavSection = ({
   );
 };
 
-export const SearchFilters = ({ cubes }: { cubes: SearchCubeResult[] }) => {
-  const { dataSource } = useDataSourceStore();
-  const locale = useLocale();
+export const SearchFilters = ({
+  allCubes,
+}: {
+  allCubes: SearchCubeResult[];
+}) => {
   const { filters } = useBrowseContext();
-  const [{ data: allThemes }] = useThemesQuery({
-    variables: {
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-    },
-  });
-  const [{ data: allOrgs }] = useOrganizationsQuery({
-    variables: {
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-    },
-  });
+  const { allThemes, allOrgs } = React.useMemo(() => {
+    return {
+      allThemes: uniqBy(
+        allCubes.flatMap((d) =>
+          d.cube.themes.map((d) => ({ __typename: "DataCubeTheme", ...d }))
+        ),
+        (d) => d.iri
+      ) as DataCubeTheme[],
+      allOrgs: uniqBy(
+        allCubes
+          .filter((d) => d.cube.creator)
+          .flatMap((d) => ({
+            __typename: "DataCubeOrganization",
+            ...d.cube.creator,
+          })),
+        (d) => d!.iri
+      ) as DataCubeOrganization[],
+    };
+  }, [allCubes]);
 
   const counts = useMemo(() => {
     const result: Record<string, number> = {};
 
-    for (const { cube } of cubes) {
+    for (const { cube } of allCubes) {
       const countables = [
         ...cube.themes,
         ...cube.subthemes,
@@ -637,7 +641,7 @@ export const SearchFilters = ({ cubes }: { cubes: SearchCubeResult[] }) => {
     }
 
     return result;
-  }, [cubes]);
+  }, [allCubes]);
 
   const themeFilter = filters.find(isAttrEqual("__typename", "DataCubeTheme"));
   const orgFilter = filters.find(
@@ -645,10 +649,7 @@ export const SearchFilters = ({ cubes }: { cubes: SearchCubeResult[] }) => {
   );
 
   const [allThemesAlpha, allOrgsAlpha] = useMemo(() => {
-    return [
-      allThemes ? sortBy(allThemes.themes, (x) => x?.label) : null,
-      allOrgs ? sortBy(allOrgs.organizations, (x) => x?.label) : null,
-    ];
+    return [sortBy(allThemes, (d) => d.label), sortBy(allOrgs, (d) => d.label)];
   }, [allThemes, allOrgs]);
 
   const displayedThemes = allThemesAlpha?.filter((theme) => {
@@ -660,7 +661,7 @@ export const SearchFilters = ({ cubes }: { cubes: SearchCubeResult[] }) => {
       return false;
     }
 
-    if (themeFilter && themeFilter !== theme) {
+    if (themeFilter && themeFilter.iri !== theme.iri) {
       return false;
     }
 
@@ -672,11 +673,11 @@ export const SearchFilters = ({ cubes }: { cubes: SearchCubeResult[] }) => {
       return false;
     }
 
-    if (!counts[org.iri] && orgFilter !== org) {
+    if (!counts[org.iri] && orgFilter && orgFilter.iri !== org.iri) {
       return false;
     }
 
-    if (orgFilter && orgFilter !== org) {
+    if (orgFilter && orgFilter.iri !== org.iri) {
       return false;
     }
 
@@ -703,10 +704,10 @@ export const SearchFilters = ({ cubes }: { cubes: SearchCubeResult[] }) => {
 
   const subthemes = React.useMemo(() => {
     return uniqBy(
-      cubes.flatMap((d) => d.cube.subthemes),
+      allCubes.flatMap((d) => d.cube.subthemes),
       (d) => d.iri
     );
-  }, [cubes]);
+  }, [allCubes]);
 
   const orgNav =
     displayedOrgs && displayedOrgs.length > 0 ? (
diff --git a/app/browser/select-dataset-step.tsx b/app/browser/select-dataset-step.tsx
index 13047b60eb..b02f9c17b2 100644
--- a/app/browser/select-dataset-step.tsx
+++ b/app/browser/select-dataset-step.tsx
@@ -269,7 +269,7 @@ const SelectDatasetStepContent = () => {
               </MotionBox>
             ) : (
               <MotionBox key="search-filters" {...navPresenceProps}>
-                <SearchFilters cubes={allCubes} />
+                <SearchFilters allCubes={allCubes} />
               </MotionBox>
             )}
           </AnimatePresence>