fix: Pre-load cache per active chart, not every chart

visualize-admin · Jun 28, 2024 · 793347c · 793347c
1 parent 027d561
commit 793347c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 50 deletions.
diff --git a/app/configurator/components/add-dataset-dialog.tsx b/app/configurator/components/add-dataset-dialog.tsx
@@ -48,7 +48,6 @@ import groupBy from "lodash/groupBy";
 import keyBy from "lodash/keyBy";
 import maxBy from "lodash/maxBy";
 import uniq from "lodash/uniq";
-import uniqBy from "lodash/uniqBy";
 import { FormEvent, useCallback, useEffect, useMemo, useState } from "react";
 import { useClient } from "urql";
 
@@ -61,6 +60,7 @@ import {
   addDatasetInConfig,
   ConfiguratorStateConfiguringChart,
   DataSource,
+  getChartConfig,
   isConfiguring,
   useConfiguratorState,
 } from "@/configurator";
@@ -1257,25 +1257,24 @@ const useAddDataset = () => {
           JSON.stringify(state)
         ) as ConfiguratorStateConfiguringChart;
         addDatasetInConfig(nextState, addDatasetOptions);
+        const chartConfig = getChartConfig(nextState, state.activeChartKey);
 
-        const allCubes = uniqBy(
-          nextState.chartConfigs.flatMap((x) => x.cubes),
-          (x) => x.iri
-        );
         const res = await executeDataCubesComponentsQuery(client, {
-          locale: locale,
+          locale,
           sourceType,
           sourceUrl,
-          cubeFilters: allCubes.map((cube) => ({
+          cubeFilters: chartConfig.cubes.map((cube) => ({
             iri: cube.iri,
             joinBy: cube.joinBy,
+            componentIris: undefined,
             loadValues: true,
           })),
         });
 
         if (res.error || !res.data) {
           throw new Error("Could not fetch dimensions and measures");
         }
+
         dispatch({
           type: "DATASET_ADD",
           value: addDatasetOptions,
@@ -1284,7 +1283,7 @@ const useAddDataset = () => {
         const possibleType = getPossibleChartTypes({
           dimensions: dimensions,
           measures: measures,
-          cubeCount: allCubes.length,
+          cubeCount: chartConfig.cubes.length,
         });
         dispatch({
           type: "CHART_TYPE_CHANGED",

diff --git a/app/configurator/configurator-state/reducer.spec.tsx b/app/configurator/configurator-state/reducer.spec.tsx
@@ -127,12 +127,12 @@ describe("add dataset", () => {
       addAction
     ) as ConfiguratorStatePublishing;
 
-    getCachedComponents.mockImplementation((_, cubes) => {
+    getCachedComponents.mockImplementation((options) => {
       // TODO Cubes join by need to be reset at the moment, will change
       // when we have more than 2 cubes
-      expect(cubes.map((x) => x.joinBy).every((x) => x === undefined)).toBe(
-        true
-      );
+      expect(
+        options.cubeFilters.map((x) => x.joinBy).every((x) => x === undefined)
+      ).toBe(true);
       return getCachedComponentsMock.electricyPricePerCantonDimensions;
     });
     const newState2 = runReducer(

diff --git a/app/configurator/configurator-state/reducer.tsx b/app/configurator/configurator-state/reducer.tsx
@@ -361,14 +361,14 @@ export const handleChartFieldChanged = (
     selectedValues: actionSelectedValues,
   } = action.value;
   const f = get(chartConfig.fields, field);
-  const dataCubesComponents = getCachedComponents(
-    draft.dataSource,
-    chartConfig.cubes.map((cube) => ({
+  const dataCubesComponents = getCachedComponents({
+    locale,
+    dataSource: draft.dataSource,
+    cubeFilters: chartConfig.cubes.map((cube) => ({
       iri: cube.iri,
       joinBy: cube.joinBy,
     })),
-    locale
-  );
+  });
   const dimensions = dataCubesComponents?.dimensions ?? [];
   const measures = dataCubesComponents?.measures ?? [];
   const components = [...dimensions, ...measures];
@@ -418,14 +418,14 @@ export const handleChartOptionChanged = (
     const { locale, path, field, value } = action.value;
     const chartConfig = getChartConfig(draft);
     const updatePath = field === null ? path : `fields["${field}"].${path}`;
-    const dataCubesComponents = getCachedComponents(
-      draft.dataSource,
-      chartConfig.cubes.map((cube) => ({
+    const dataCubesComponents = getCachedComponents({
+      locale,
+      dataSource: draft.dataSource,
+      cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         joinBy: cube.joinBy,
       })),
-      locale
-    );
+    });
 
     const dimensions = dataCubesComponents?.dimensions ?? [];
     const measures = dataCubesComponents?.measures ?? [];
@@ -575,14 +575,14 @@ const reducer_: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
       if (isConfiguring(draft)) {
         const { locale, chartKey, chartType } = action.value;
         const chartConfig = getChartConfig(draft, chartKey);
-        const dataCubesComponents = getCachedComponents(
-          draft.dataSource,
-          chartConfig.cubes.map((cube) => ({
+        const dataCubesComponents = getCachedComponents({
+          locale,
+          dataSource: draft.dataSource,
+          cubeFilters: chartConfig.cubes.map((cube) => ({
             iri: cube.iri,
             joinBy: cube.joinBy,
           })),
-          locale
-        );
+        });
         const dimensions = dataCubesComponents?.dimensions;
         const measures = dataCubesComponents?.measures;
 
@@ -621,14 +621,14 @@ const reducer_: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
       if (isConfiguring(draft)) {
         const chartConfig = getChartConfig(draft);
         delete (chartConfig.fields as GenericFields)[action.value.field];
-        const dataCubesComponents = getCachedComponents(
-          draft.dataSource,
-          chartConfig.cubes.map((cube) => ({
+        const dataCubesComponents = getCachedComponents({
+          locale: action.value.locale,
+          dataSource: draft.dataSource,
+          cubeFilters: chartConfig.cubes.map((cube) => ({
             iri: cube.iri,
             joinBy: cube.joinBy,
           })),
-          action.value.locale
-        );
+        });
         const dimensions = dataCubesComponents?.dimensions ?? [];
         const newConfig = deriveFiltersFromFields(chartConfig, { dimensions });
         const index = draft.chartConfigs.findIndex(
@@ -872,14 +872,14 @@ const reducer_: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
       if (isConfiguring(draft)) {
         const chartConfig =
           createDraft(action.value.chartConfig) ?? getChartConfig(draft);
-        const dataCubesComponents = getCachedComponents(
-          draft.dataSource,
-          chartConfig.cubes.map((cube) => ({
+        const dataCubesComponents = getCachedComponents({
+          locale: action.value.locale,
+          dataSource: draft.dataSource,
+          cubeFilters: chartConfig.cubes.map((cube) => ({
             iri: cube.iri,
             joinBy: cube.joinBy,
           })),
-          action.value.locale
-        );
+        });
 
         if (dataCubesComponents) {
           const cubes = current(chartConfig.cubes);
@@ -922,15 +922,14 @@ const reducer_: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
         const newCubes = chartConfig.cubes.filter(
           (c) => c.iri !== removedCubeIri
         );
-        const dataCubesComponents = getCachedComponents(
-          draft.dataSource,
-          newCubes.map((cube) => ({
+        const dataCubesComponents = getCachedComponents({
+          locale,
+          dataSource: draft.dataSource,
+          cubeFilters: newCubes.map((cube) => ({
             iri: cube.iri,
-            // Only keep joinBy while we have more than one cube
             joinBy: newCubes.length > 1 ? cube.joinBy : undefined,
           })),
-          locale
-        );
+        });
 
         if (!dataCubesComponents) {
           throw new Error(

diff --git a/app/urql-cache.tsx b/app/urql-cache.tsx
@@ -15,27 +15,31 @@ import { Locale } from "@/locales/locales";
  * Reads components from client cache, reading cube by cube.
  * Components are not joined in cache, but transformed here.
  */
-export const getCachedComponents = (
-  dataSource: DataSource,
-  cubeFilters: DataCubeComponentFilter[],
-  locale: Locale
-): DataCubeComponents | undefined => {
+export const getCachedComponents = ({
+  locale,
+  dataSource,
+  cubeFilters,
+}: {
+  locale: Locale;
+  dataSource: DataSource;
+  cubeFilters: DataCubeComponentFilter[];
+}): DataCubeComponents | undefined => {
   const queries = cubeFilters
     .map((cubeFilter) => {
       return client.readQuery<
         DataCubeComponentsQuery,
         DataCubeComponentsQueryVariables
       >(DataCubeComponentsDocument, {
+        locale,
         sourceType: dataSource.type,
         sourceUrl: dataSource.url,
-        locale,
         cubeFilter: {
           iri: cubeFilter.iri,
           componentIris: undefined,
           joinBy: cubeFilter.joinBy,
           loadValues: true,
         },
-      })!;
+      });
     })
     .filter(truthy);
   return {