Merge pull request #1016 from visualize-admin/perf/published-chart

perf: Only load hierarchies where necessary
visualize-admin · Apr 5, 2023 · f7c8ee8 · f7c8ee8 · vercel · Apr 5, 2023
2 parents 9f36514 + 9f01359
commit f7c8ee8
Show file tree

Hide file tree

Showing 7 changed files with 364 additions and 265 deletions.
diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx
@@ -48,8 +48,8 @@ import {
 } from "@/configurator/components/ui-helpers";
 import { isTemporalDimension, Observation } from "@/domain/data";
 import {
-  useFormatNumber,
   formatNumberWithUnit,
+  useFormatNumber,
   useTimeFormatUnit,
 } from "@/formatters";
 import {
@@ -224,6 +224,7 @@ const useColumnsState = (
       fields.x.sorting,
       fields.x.useAbbreviations,
       xDimension,
+      chartConfig.filters,
     ]);
 
   const yMeasure = measures.find((d) => d.iri === fields.y.componentIri);

diff --git a/app/charts/index.ts b/app/charts/index.ts
@@ -52,7 +52,10 @@ import {
   NumericalMeasure,
   OrdinalMeasure,
 } from "../graphql/query-hooks";
-import { DataCubeMetadata } from "../graphql/types";
+import {
+  DataCubeMetadata,
+  DataCubeMetadataWithHierarchies,
+} from "../graphql/types";
 import { unreachableError } from "../utils/unreachable";
 
 import {
@@ -133,7 +136,9 @@ export const DEFAULT_SORTING: SortingOption = {
 /**
  * Finds bottomost layer for the first hierarchy
  */
-const findBottommostLayers = (dimension: DataCubeMetadata["dimensions"][0]) => {
+const findBottommostLayers = (
+  dimension: DataCubeMetadataWithHierarchies["dimensions"][0]
+) => {
   const leaves = [] as HierarchyValue[];
   let hasSeenMultiHierarchyNode = false;
   bfs(dimension?.hierarchy as HierarchyValue[], (node) => {
@@ -222,8 +227,8 @@ export const getInitialConfig = ({
   measures,
 }: {
   chartType: ChartType;
-  dimensions: DataCubeMetadata["dimensions"];
-  measures: DataCubeMetadata["measures"];
+  dimensions: DataCubeMetadataWithHierarchies["dimensions"];
+  measures: DataCubeMetadataWithHierarchies["measures"];
 }): ChartConfig => {
   const numericalMeasures = measures.filter(isNumericalMeasure);
 

diff --git a/app/configurator/components/datatable.tsx b/app/configurator/components/datatable.tsx
@@ -22,7 +22,6 @@ import { Observation, isNumericalMeasure } from "@/domain/data";
 import { useDimensionFormatters } from "@/formatters";
 import {
   DimensionMetadataFragment,
-  DimensionMetadataWithoutHierarchiesFragment,
   useDataCubeObservationsQuery,
 } from "@/graphql/query-hooks";
 import SvgIcChevronDown from "@/icons/components/IcChevronDown";
@@ -281,8 +280,8 @@ export const DataSetTable = ({
 };
 
 export const getSortedColumns = (
-  dimensions: DimensionMetadataWithoutHierarchiesFragment[],
-  measures: DimensionMetadataWithoutHierarchiesFragment[]
+  dimensions: DimensionMetadataFragment[],
+  measures: DimensionMetadataFragment[]
 ) => {
   const allDimensions = [...dimensions, ...measures];
   allDimensions.sort((a, b) =>

diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
@@ -67,10 +67,11 @@ import {
 import { DEFAULT_DATA_SOURCE } from "@/domain/datasource";
 import { client } from "@/graphql/client";
 import {
+  DataCubeMetadataWithComponentValuesAndHierarchiesQuery,
+  DataCubeMetadataWithComponentValuesAndHierarchiesQueryVariables,
   DataCubeMetadataWithComponentValuesDocument,
-  DataCubeMetadataWithComponentValuesQuery,
-  DataCubeMetadataWithComponentValuesQueryVariables,
   DimensionMetadataFragment,
+  DimensionMetadataWithHierarchiesFragment,
   NumericalMeasure,
   OrdinalMeasure,
 } from "@/graphql/query-hooks";
@@ -299,8 +300,8 @@ const getCachedCubeMetadataWithComponentValues = (
   locale: Locale
 ) => {
   const query = client.readQuery<
-    DataCubeMetadataWithComponentValuesQuery,
-    DataCubeMetadataWithComponentValuesQueryVariables
+    DataCubeMetadataWithComponentValuesAndHierarchiesQuery,
+    DataCubeMetadataWithComponentValuesAndHierarchiesQueryVariables
   >(DataCubeMetadataWithComponentValuesDocument, {
     iri: draft.dataSet,
     locale,
@@ -383,7 +384,10 @@ export const moveFilterField = produce(
 );
 
 export const deriveFiltersFromFields = produce(
-  (chartConfig: ChartConfig, dimensions: DimensionMetadataFragment[]) => {
+  (
+    chartConfig: ChartConfig,
+    dimensions: DimensionMetadataWithHierarchiesFragment[]
+  ) => {
     const { chartType, fields, filters } = chartConfig;
 
     if (chartType === "table") {
@@ -484,7 +488,7 @@ export const applyNonTableDimensionToFilters = ({
   isField,
 }: {
   filters: Filters;
-  dimension: DimensionMetadataFragment;
+  dimension: DimensionMetadataWithHierarchiesFragment;
   isField: boolean;
 }) => {
   const currentFilter = filters[dimension.iri];
@@ -1434,8 +1438,8 @@ export const initChartStateFromCube = async (
 ): Promise<ConfiguratorState | undefined> => {
   const { data } = await client
     .query<
-      DataCubeMetadataWithComponentValuesQuery,
-      DataCubeMetadataWithComponentValuesQueryVariables
+      DataCubeMetadataWithComponentValuesAndHierarchiesQuery,
+      DataCubeMetadataWithComponentValuesAndHierarchiesQueryVariables
     >(DataCubeMetadataWithComponentValuesDocument, {
       iri: datasetIri,
       sourceType: dataSource.type,

diff --git a/app/graphql/queries/data-cubes.graphql b/app/graphql/queries/data-cubes.graphql
@@ -1,42 +1,3 @@
-query DataCubes(
-  $sourceType: String!
-  $sourceUrl: String!
-  $locale: String!
-  $query: String
-  $order: DataCubeResultOrder
-  $includeDrafts: Boolean
-  $filters: [DataCubeSearchFilter!]
-) {
-  dataCubes(
-    sourceType: $sourceType
-    sourceUrl: $sourceUrl
-    locale: $locale
-    query: $query
-    order: $order
-    includeDrafts: $includeDrafts
-    filters: $filters
-  ) {
-    highlightedTitle
-    highlightedDescription
-    dataCube {
-      iri
-      title
-      workExamples
-      creator {
-        iri
-        label
-      }
-      description
-      publicationStatus
-      datePublished
-      themes {
-        iri
-        label
-      }
-    }
-  }
-}
-
 fragment dimensionMetadata on Dimension {
   iri
   label
@@ -51,7 +12,6 @@ fragment dimensionMetadata on Dimension {
     iri
     type
   }
-  ...hierarchyMetadata
   ... on TemporalDimension {
     timeUnit
     timeFormat
@@ -64,7 +24,7 @@ fragment dimensionMetadata on Dimension {
   }
 }
 
-fragment dimensionMetadataWithoutHierarchies on Dimension {
+fragment dimensionMetadataWithHierarchies on Dimension {
   iri
   label
   description
@@ -88,6 +48,67 @@ fragment dimensionMetadataWithoutHierarchies on Dimension {
     resolution
     isDecimal
   }
+  ...hierarchyMetadata
+}
+
+fragment hierarchyMetadata on Dimension {
+  hierarchy(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    ...hierarchyValueFields
+    children {
+      ...hierarchyValueFields
+      children {
+        ...hierarchyValueFields
+        children {
+          ...hierarchyValueFields
+          children {
+            ...hierarchyValueFields
+            children {
+              ...hierarchyValueFields
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+query DataCubes(
+  $sourceType: String!
+  $sourceUrl: String!
+  $locale: String!
+  $query: String
+  $order: DataCubeResultOrder
+  $includeDrafts: Boolean
+  $filters: [DataCubeSearchFilter!]
+) {
+  dataCubes(
+    sourceType: $sourceType
+    sourceUrl: $sourceUrl
+    locale: $locale
+    query: $query
+    order: $order
+    includeDrafts: $includeDrafts
+    filters: $filters
+  ) {
+    highlightedTitle
+    highlightedDescription
+    dataCube {
+      iri
+      title
+      workExamples
+      creator {
+        iri
+        label
+      }
+      description
+      publicationStatus
+      datePublished
+      themes {
+        iri
+        label
+      }
+    }
+  }
 }
 
 query DataCubePreview(
@@ -110,10 +131,10 @@ query DataCubePreview(
     description
     publicationStatus
     dimensions(sourceType: $sourceType, sourceUrl: $sourceUrl) {
-      ...dimensionMetadataWithoutHierarchies
+      ...dimensionMetadata
     }
     measures(sourceType: $sourceType, sourceUrl: $sourceUrl) {
-      ...dimensionMetadataWithoutHierarchies
+      ...dimensionMetadata
     }
     observations(sourceType: $sourceType, sourceUrl: $sourceUrl, limit: 10) {
       data
@@ -190,32 +211,44 @@ query DataCubeMetadataWithComponentValues(
     landingPage
     dimensions(sourceType: $sourceType, sourceUrl: $sourceUrl) {
       ...dimensionMetadata
-      ...hierarchyMetadata
     }
     measures(sourceType: $sourceType, sourceUrl: $sourceUrl) {
       ...dimensionMetadata
-      ...hierarchyMetadata
     }
   }
 }
 
-fragment hierarchyMetadata on Dimension {
-  hierarchy(sourceType: $sourceType, sourceUrl: $sourceUrl) {
-    ...hierarchyValueFields
-    children {
-      ...hierarchyValueFields
-      children {
-        ...hierarchyValueFields
-        children {
-          ...hierarchyValueFields
-          children {
-            ...hierarchyValueFields
-            children {
-              ...hierarchyValueFields
-            }
-          }
-        }
-      }
+query DataCubeMetadataWithComponentValuesAndHierarchies(
+  $iri: String!
+  $sourceType: String!
+  $sourceUrl: String!
+  $locale: String!
+  $latest: Boolean
+  $filters: Filters
+) {
+  dataCubeByIri(
+    iri: $iri
+    sourceType: $sourceType
+    sourceUrl: $sourceUrl
+    locale: $locale
+    latest: $latest
+  ) {
+    iri
+    title
+    publisher
+    publicationStatus
+    expires
+    identifier
+    workExamples
+    creator {
+      iri
+    }
+    landingPage
+    dimensions(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+      ...dimensionMetadataWithHierarchies
+    }
+    measures(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+      ...dimensionMetadataWithHierarchies
     }
   }
 }
@@ -241,8 +274,7 @@ query DimensionValues(
       sourceType: $sourceType
       sourceUrl: $sourceUrl
     ) {
-      ...dimensionMetadata
-      ...hierarchyMetadata
+      ...dimensionMetadataWithHierarchies
     }
   }
 }