perf: Optimize dataset preview performance

app/browse/datatable.tsx

@@ -80,24 +80,16 @@ export const PreviewTable = ({
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">();
   const formatters = useDimensionFormatters(headers);
   const sortedObservations = useMemo(() => {
-    if (sortBy === undefined) {
+    if (!sortBy) {
       return observations;
     }
 
     const compare = sortDirection === "asc" ? ascending : descending;
-    const valuesIndex = uniqueMapBy(sortBy.values, (x) => x.label);
+    const valuesIndex = uniqueMapBy(sortBy.values, (d) => d.label);
     const convert =
       isNumericalMeasure(sortBy) || sortBy.isNumerical
-        ? (d: string) => +d
-        : (d: string) => {
-            const value = valuesIndex.get(d);
-
-            if (value?.position) {
-              return value.position;
-            }
-
-            return d;
-          };
+        ? (value: string) => +value
+        : (value: string) => valuesIndex.get(value)?.position ?? value;
 
     return [...observations].sort((a, b) =>
       compare(
@@ -111,11 +103,7 @@ export const PreviewTable = ({
 
   // Tooltip contained inside the table so as not to overflow when table is scrolled
   const tooltipProps = useMemo(
-    () => ({
-      PopperProps: {
-        container: tooltipContainerRef.current,
-      },
-    }),
+    () => ({ PopperProps: { container: tooltipContainerRef.current } }),
     []
   );
 

app/browser/dataset-preview.tsx

@@ -7,13 +7,15 @@ import * as React from "react";
 
 import { DataSetPreviewTable } from "@/browse/datatable";
 import { useFootnotesStyles } from "@/components/chart-footnotes";
-import { DataDownloadMenu, RunSparqlQuery } from "@/components/data-download";
+import { DataDownloadMenu } from "@/components/data-download";
 import Flex from "@/components/flex";
 import { HintRed, Loading, LoadingDataError } from "@/components/hint";
 import { DataSource } from "@/config-types";
 import { sourceToLabel } from "@/domain/datasource";
-import { useDataCubesComponentsQuery } from "@/graphql/hooks";
-import { useDataCubePreviewQuery } from "@/graphql/query-hooks";
+import {
+  useDataCubeMetadataQuery,
+  useDataCubePreviewQuery,
+} from "@/graphql/query-hooks";
 import { DataCubePublicationStatus } from "@/graphql/resolver-types";
 import { useLocale } from "@/locales/use-locale";
 
@@ -93,55 +95,38 @@ export const DataSetPreview = ({
 }) => {
   const footnotesClasses = useFootnotesStyles({ useMarginTop: false });
   const locale = useLocale();
-  const cubeFilters = [{ iri: dataSetIri }];
+  const variables = {
+    sourceType: dataSource.type,
+    sourceUrl: dataSource.url,
+    locale,
+    cubeFilter: { iri: dataSetIri },
+  };
+  const [{ data: metadata, fetching: fetchingMetadata, error: metadataError }] =
+    useDataCubeMetadataQuery({ variables });
   const [
     { data: previewData, fetching: fetchingPreview, error: previewError },
-  ] = useDataCubePreviewQuery({
-    variables: {
-      iri: dataSetIri,
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-    },
-  });
-  const [
-    {
-      data: componentsData,
-      fetching: fetchingComponents,
-      error: componentsError,
-    },
-  ] = useDataCubesComponentsQuery({
-    variables: {
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-      cubeFilters,
-    },
-  });
+  ] = useDataCubePreviewQuery({ variables });
   const classes = useStyles({
-    descriptionPresent: !!previewData?.dataCubeByIri?.description,
+    descriptionPresent: !!metadata?.dataCubeMetadata.description,
   });
 
   React.useEffect(() => {
     window.scrollTo({ top: 0 });
   }, []);
 
-  if (fetchingPreview || fetchingComponents) {
+  if (fetchingMetadata || fetchingPreview) {
     return (
       <Flex className={classes.loadingWrapper}>
         <Loading />
       </Flex>
     );
-  } else if (
-    previewData?.dataCubeByIri &&
-    componentsData?.dataCubesComponents
-  ) {
-    const { dataCubeByIri } = previewData;
-    const { dataCubesComponents } = componentsData;
+  } else if (metadata?.dataCubeMetadata && previewData?.dataCubePreview) {
+    const { dataCubeMetadata } = metadata;
+    const { dataCubePreview } = previewData;
 
     return (
       <Flex className={classes.root}>
-        {dataCubeByIri.publicationStatus ===
+        {dataCubeMetadata.publicationStatus ===
           DataCubePublicationStatus.Draft && (
           <Box sx={{ mb: 4 }}>
             <HintRed iconName="datasetError" iconSize={64}>
@@ -156,15 +141,15 @@ export const DataSetPreview = ({
         <Flex className={classes.header}>
           <Head>
             <title key="title">
-              {dataCubeByIri.title} - visualize.admin.ch
+              {dataCubeMetadata.title} - visualize.admin.ch
             </title>
           </Head>
           <Typography className={classes.title} component="div" variant="h1">
-            {dataCubeByIri.title}
+            {dataCubeMetadata.title}
           </Typography>
           <Link
             href={`/create/new?cube=${
-              dataCubeByIri.iri
+              dataCubeMetadata.iri
             }&dataSource=${sourceToLabel(dataSource)}`}
             passHref
             legacyBehavior
@@ -177,36 +162,31 @@ export const DataSetPreview = ({
           </Link>
         </Flex>
         <Paper className={classes.paper} elevation={5}>
-          {dataCubeByIri.description && (
+          {dataCubeMetadata.description && (
             <Typography
               className={classes.description}
               component="div"
               variant="body2"
             >
-              {dataCubeByIri.description}
+              {dataCubeMetadata.description}
             </Typography>
           )}
 
           <Flex className={classes.tableWrapper}>
             <DataSetPreviewTable
-              title={dataCubeByIri.title}
-              dimensions={dataCubesComponents.dimensions}
-              measures={dataCubesComponents.measures}
-              observations={dataCubeByIri.observations.data}
+              title={dataCubeMetadata.title}
+              dimensions={dataCubePreview.dimensions}
+              measures={dataCubePreview.measures}
+              observations={dataCubePreview.observations}
             />
           </Flex>
           <Flex className={classes.footnotesWrapper}>
             <Flex className={footnotesClasses.actions}>
               <DataDownloadMenu
                 dataSource={dataSource}
-                title={dataCubeByIri.title}
-                filters={cubeFilters}
+                title={dataCubeMetadata.title}
+                filters={[variables.cubeFilter]}
               />
-              {dataCubeByIri.observations.sparqlEditorUrl && (
-                <RunSparqlQuery
-                  url={dataCubeByIri.observations.sparqlEditorUrl}
-                />
-              )}
             </Flex>
             <Typography
               className={classes.numberOfRows}
@@ -225,7 +205,7 @@ export const DataSetPreview = ({
     return (
       <Flex className={classes.loadingWrapper}>
         <LoadingDataError
-          message={previewError?.message ?? componentsError?.message}
+          message={metadataError?.message ?? previewError?.message}
         />
       </Flex>
     );

app/domain/data.ts

@@ -40,21 +40,6 @@ export type HierarchyValue = {
   children?: HierarchyValue[];
 };
 
-export type Observation = Record<string, ObservationValue>;
-
-export type DataCubeObservations = {
-  data: Observation[];
-  sparqlEditorUrl: string;
-};
-
-export type DataCubesObservations = {
-  data: Observation[];
-  sparqlEditorUrls: {
-    cubeIri: string;
-    url: string;
-  }[];
-};
-
 export type DataCubeComponents = {
   dimensions: Dimension[];
   measures: Measure[];
@@ -82,6 +67,27 @@ export type DataCubeMetadata = {
   workExamples?: string[];
 };
 
+export type Observation = Record<string, ObservationValue>;
+
+export type DataCubeObservations = {
+  data: Observation[];
+  sparqlEditorUrl: string;
+};
+
+export type DataCubesObservations = {
+  data: Observation[];
+  sparqlEditorUrls: {
+    cubeIri: string;
+    url: string;
+  }[];
+};
+
+export type DataCubePreview = {
+  dimensions: Dimension[];
+  measures: Measure[];
+  observations: Observation[];
+};
+
 export type Component = Dimension | Measure;
 
 export type BaseComponent = {

app/graphql/queries/data-cubes.graphql

@@ -40,6 +40,20 @@ query DataCubeObservations(
   )
 }
 
+query DataCubePreview(
+  $sourceType: String!
+  $sourceUrl: String!
+  $locale: String!
+  $cubeFilter: DataCubePreviewFilter!
+) {
+  dataCubePreview(
+    sourceType: $sourceType
+    sourceUrl: $sourceUrl
+    locale: $locale
+    cubeFilter: $cubeFilter
+  )
+}
+
 query SearchCubes(
   $sourceType: String!
   $sourceUrl: String!
@@ -64,38 +78,6 @@ query SearchCubes(
   }
 }
 
-query DataCubePreview(
-  $iri: String!
-  $sourceType: String!
-  $sourceUrl: String!
-  $locale: String!
-  $latest: Boolean
-  $disableValuesLoad: Boolean = true
-) {
-  dataCubeByIri(
-    iri: $iri
-    sourceType: $sourceType
-    sourceUrl: $sourceUrl
-    locale: $locale
-    latest: $latest
-    disableValuesLoad: $disableValuesLoad
-  ) {
-    iri
-    title
-    description
-    publicationStatus
-    observations(
-      sourceType: $sourceType
-      sourceUrl: $sourceUrl
-      preview: true
-      limit: 10
-    ) {
-      data
-      sparqlEditorUrl
-    }
-  }
-}
-
 query GeoCoordinatesByDimensionIri(
   $dataCubeIri: String!
   $dimensionIri: String!