perf: Do not use two queries when searching for cubes

visualize-admin · Oct 25, 2023 · 0c08169 · 0c08169
1 parent c82f421
commit 0c08169
Show file tree

Hide file tree

Showing 17 changed files with 467 additions and 343 deletions.
diff --git a/app/browser/context.tsx b/app/browser/context.tsx
@@ -8,7 +8,7 @@ import { Router, useRouter } from "next/router";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import {
-  DataCubeResultOrder,
+  SearchCubeResultOrder,
   useOrganizationsQuery,
   useThemesQuery,
 } from "@/graphql/query-hooks";
@@ -156,13 +156,13 @@ export const useBrowseState = () => {
   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 +171,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);
       },

diff --git a/app/browser/dataset-browse.tsx b/app/browser/dataset-browse.tsx
@@ -36,9 +36,9 @@ import { truthy } from "@/domain/types";
 import { useFormatDate } from "@/formatters";
 import {
   DataCubeOrganization,
-  DataCubeResultOrder,
-  DataCubesQuery,
   DataCubeTheme,
+  SearchCubeResultOrder,
+  SearchCubesQuery,
   useOrganizationsQuery,
   useSubthemesQuery,
   useThemesQuery,
@@ -119,7 +119,7 @@ export const SearchDatasetControls = ({
   searchResult,
 }: {
   browseState: BrowseState;
-  searchResult: Maybe<DataCubesQuery>;
+  searchResult: Maybe<SearchCubesQuery>;
 }) => {
   const {
     inputRef,
@@ -131,18 +131,18 @@ export const SearchDatasetControls = ({
     onSetOrder,
   } = browseState;
 
-  const order = stateOrder || DataCubeResultOrder.CreatedDesc;
+  const order = stateOrder || SearchCubeResultOrder.CreatedDesc;
   const options = [
     {
-      value: DataCubeResultOrder.Score,
+      value: SearchCubeResultOrder.Score,
       label: t({ id: "dataset.order.relevance", message: `Relevance` }),
     },
     {
-      value: DataCubeResultOrder.TitleAsc,
+      value: SearchCubeResultOrder.TitleAsc,
       label: t({ id: "dataset.order.title", message: `Title` }),
     },
     {
-      value: DataCubeResultOrder.CreatedDesc,
+      value: SearchCubeResultOrder.CreatedDesc,
       label: t({ id: "dataset.order.newest", message: `Newest` }),
     },
   ];
@@ -166,10 +166,10 @@ export const SearchDatasetControls = ({
         aria-live="polite"
         data-testid="search-results-count"
       >
-        {searchResult && searchResult.dataCubes.length > 0 && (
+        {searchResult && searchResult.searchCubes.length > 0 && (
           <Plural
             id="dataset.results"
-            value={searchResult.dataCubes.length}
+            value={searchResult.searchCubes.length}
             zero="No datasets"
             one="# dataset"
             other="# datasets"
@@ -203,7 +203,7 @@ export const SearchDatasetControls = ({
           data-testid="datasetSort"
           options={isSearching ? options : options.slice(1)}
           onChange={(e) => {
-            onSetOrder(e.target.value as DataCubeResultOrder);
+            onSetOrder(e.target.value as SearchCubeResultOrder);
           }}
         />
       </Flex>
@@ -602,7 +602,7 @@ const NavSection = ({
   );
 };
 
-export const SearchFilters = ({ data }: { data?: DataCubesQuery }) => {
+export const SearchFilters = ({ data }: { data?: SearchCubesQuery }) => {
   const { dataSource } = useDataSourceStore();
   const locale = useLocale();
   const { filters } = useBrowseContext();
@@ -622,22 +622,24 @@ export const SearchFilters = ({ data }: { data?: DataCubesQuery }) => {
   });
 
   const counts = useMemo(() => {
-    if (!data?.dataCubes) {
+    if (!data?.searchCubes) {
       return {};
     }
 
     const result: Record<string, number> = {};
 
-    for (const { dataCube } of data.dataCubes) {
-      const countables = [...dataCube.themes, dataCube.creator].filter(truthy);
+    for (const { cube } of data.searchCubes) {
+      const countables = [...cube.themes, cube.creator].filter(truthy);
 
       for (const { iri } of countables) {
-        result[iri] = (result[iri] ?? 0) + 1;
+        if (iri) {
+          result[iri] = (result[iri] ?? 0) + 1;
+        }
       }
     }
 
     return result;
-  }, [data?.dataCubes]);
+  }, [data?.searchCubes]);
 
   const themeFilter = filters.find(isAttrEqual("__typename", "DataCubeTheme"));
   const orgFilter = filters.find(
@@ -755,11 +757,9 @@ export const SearchFilters = ({ data }: { data?: DataCubesQuery }) => {
 };
 
 export const DatasetResults = ({
-  resultProps,
   query,
 }: {
-  resultProps?: Partial<ResultProps>;
-  query: UseQueryState<DataCubesQuery>;
+  query: UseQueryState<SearchCubesQuery>;
 }) => {
   const { fetching, data, error } = query;
 
@@ -779,7 +779,7 @@ export const DatasetResults = ({
     );
   }
 
-  if ((data && data.dataCubes.length === 0) || !data) {
+  if ((data && data.searchCubes.length === 0) || !data) {
     return (
       <Typography
         variant="h2"
@@ -792,12 +792,11 @@ export const DatasetResults = ({
 
   return (
     <>
-      {data.dataCubes.map(
-        ({ dataCube, highlightedTitle, highlightedDescription }) => (
+      {data.searchCubes.map(
+        ({ cube, highlightedTitle, highlightedDescription }) => (
           <DatasetResult
-            {...resultProps}
-            key={dataCube.iri}
-            dataCube={dataCube}
+            key={cube.iri}
+            dataCube={cube}
             highlightedTitle={highlightedTitle}
             highlightedDescription={highlightedDescription}
           />
@@ -838,7 +837,7 @@ export const DateFormat = ({ date }: { date: string }) => {
 
 type ResultProps = {
   dataCube: Pick<
-    DataCubesQuery["dataCubes"][0]["dataCube"],
+    SearchCubesQuery["searchCubes"][0]["cube"],
     | "iri"
     | "publicationStatus"
     | "title"

diff --git a/app/browser/select-dataset-step.tsx b/app/browser/select-dataset-step.tsx
@@ -31,7 +31,7 @@ import {
   PanelLeftWrapper,
   PanelMiddleWrapper,
 } from "@/configurator/components/layout";
-import { useDataCubesQuery } from "@/graphql/query-hooks";
+import { useSearchCubesQuery } from "@/graphql/query-hooks";
 import { Icon } from "@/icons";
 import { useConfiguratorState, useLocale } from "@/src";
 
@@ -142,7 +142,7 @@ const SelectDatasetStepContent = () => {
     return formatBackLink(router.query);
   }, [router.query]);
   // Use the debounced query value here only!
-  const [datacubesQuery] = useDataCubesQuery({
+  const [datacubesQuery] = useSearchCubesQuery({
     variables: {
       sourceType: configState.dataSource.type,
       sourceUrl: configState.dataSource.url,

diff --git a/app/components/debug-search.tsx b/app/components/debug-search.tsx
@@ -10,14 +10,9 @@ import Select from "@mui/material/Select";
 import Switch from "@mui/material/Switch";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
-import React, {
-  useRef,
-  useState,
-  useEffect,
-  KeyboardEventHandler,
-} from "react";
+import { KeyboardEventHandler, useEffect, useRef, useState } from "react";
 
-import { DataCubeSearchFilter, useDataCubesQuery } from "@/graphql/query-hooks";
+import { SearchCubeFilter, useSearchCubesQuery } from "@/graphql/query-hooks";
 import { RequestQueryMeta } from "@/graphql/query-meta";
 
 const territoryTheme = {
@@ -56,7 +51,7 @@ const Search = ({
 }: {
   query: string;
   locale: string;
-  filters: (DataCubeSearchFilter & { name: string })[];
+  filters: (SearchCubeFilter & { name: string })[];
   includeDrafts: boolean;
   sourceUrl: string;
 }) => {
@@ -67,10 +62,10 @@ const Search = ({
     startTimeRef.current = Date.now();
   }, [query, locale, includeDrafts]);
 
-  const [cubes] = useDataCubesQuery({
+  const [cubes] = useSearchCubesQuery({
     variables: {
-      locale: locale,
-      query: query,
+      locale,
+      query,
       filters: filters.map(({ type, value }) => ({ type, value })),
       includeDrafts,
       sourceUrl,
@@ -108,9 +103,9 @@ const Search = ({
         <div>
           <Typography
             variant="caption"
-            color={cubes.data?.dataCubes.length === 0 ? "error" : undefined}
+            color={cubes.data?.searchCubes.length === 0 ? "error" : undefined}
           >
-            {cubes.data?.dataCubes.length} results |{" "}
+            {cubes.data?.searchCubes.length} results |{" "}
           </Typography>
           <Typography
             variant="caption"
@@ -125,31 +120,32 @@ const Search = ({
       ) : null}
 
       <Stack spacing={4}>
-        {cubes.data?.dataCubes.map((c) => {
-          return (
-            <div key={c.dataCube.iri}>
-              <Typography
-                variant="h6"
-                dangerouslySetInnerHTML={{ __html: c.highlightedTitle! }}
-              />
-              <Typography
-                variant="caption"
-                dangerouslySetInnerHTML={{
-                  __html:
-                    c?.highlightedDescription?.slice(0, 100) ?? "" + "...",
-                }}
-              />
-              <br />
-              <Typography variant="caption">{c?.dataCube?.iri}</Typography>
-              <Stack spacing={2} direction="row">
-                {c?.dataCube.themes.map((t) => (
-                  <Chip key={t.iri} size="small" label={t.label} />
-                ))}
-                <Chip size="small" label={c?.dataCube.publicationStatus} />
-              </Stack>
-            </div>
-          );
-        })}
+        {cubes.data?.searchCubes.map(
+          ({ cube, highlightedTitle, highlightedDescription }) => {
+            return (
+              <div key={cube.iri}>
+                <Typography
+                  variant="h6"
+                  dangerouslySetInnerHTML={{ __html: highlightedTitle! }}
+                />
+                <Typography
+                  variant="caption"
+                  dangerouslySetInnerHTML={{
+                    __html: highlightedDescription?.slice(0, 100) ?? "" + "...",
+                  }}
+                />
+                <br />
+                <Typography variant="caption">{cube.iri}</Typography>
+                <Stack spacing={2} direction="row">
+                  {cube.themes.map((t) => (
+                    <Chip key={t.iri} size="small" label={t.label} />
+                  ))}
+                  <Chip size="small" label={cube.publicationStatus} />
+                </Stack>
+              </div>
+            );
+          }
+        )}
       </Stack>
       <Accordion sx={{ mt: 2, borderTop: 0 }}>
         <AccordionSummary sx={{ typography: "h4" }}>queries</AccordionSummary>

diff --git a/app/docs/dataset-browse.docs.tsx b/app/docs/dataset-browse.docs.tsx
@@ -31,6 +31,11 @@ export default () => markdown`
           <DatasetResult
             dataCube={{
               iri: "http://example.com/iri",
+              creator: {
+                __typename: "DataCubeOrganization",
+                iri: "http://example.com/iri",
+                label: "BAFU",
+              },
               themes: [
                 {
                   __typename: "DataCubeTheme",
@@ -49,6 +54,11 @@ export default () => markdown`
           <DatasetResult
             dataCube={{
               iri: "http://example.com/iri",
+              creator: {
+                __typename: "DataCubeOrganization",
+                iri: "http://example.com/iri",
+                label: "BAFU",
+              },
               themes: [],
               title:
                 "Comptes des exploitations forestières en francs selon Année, Zone forestière, Canton et Variable",

diff --git a/app/graphql/queries/data-cubes.graphql b/app/graphql/queries/data-cubes.graphql
@@ -79,16 +79,16 @@ fragment hierarchyMetadata on Dimension {
   }
 }
 
-query DataCubes(
+query SearchCubes(
   $sourceType: String!
   $sourceUrl: String!
   $locale: String!
   $query: String
-  $order: DataCubeResultOrder
+  $order: SearchCubeResultOrder
   $includeDrafts: Boolean
-  $filters: [DataCubeSearchFilter!]
+  $filters: [SearchCubeFilter!]
 ) {
-  dataCubes(
+  searchCubes(
     sourceType: $sourceType
     sourceUrl: $sourceUrl
     locale: $locale
@@ -99,17 +99,16 @@ query DataCubes(
   ) {
     highlightedTitle
     highlightedDescription
-    dataCube {
+    cube {
       iri
       title
-      workExamples
+      description
+      publicationStatus
+      datePublished
       creator {
         iri
         label
       }
-      description
-      publicationStatus
-      datePublished
       themes {
         iri
         label