feat: Load data before changing adding the cube

We execute data cubes components query to fill up the cache before changing the chart config & chart type. This diminish flashes
visualize-admin · Mar 7, 2024 · 3744183 · 3744183
1 parent 8a21432
commit 3744183
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/app/configurator/components/add-dataset-dialog.tsx b/app/configurator/components/add-dataset-dialog.tsx
@@ -15,11 +15,14 @@ import {
 } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import { makeStyles } from "@mui/styles";
+import uniqBy from "lodash/uniqBy";
 import { FormEvent, useMemo, useState } from "react";
 
 import { DatasetResults, PartialSearchCube } from "@/browser/dataset-browse";
+import { getPossibleChartTypes } from "@/charts";
 import {
   ConfiguratorStateConfiguringChart,
+  addDatasetInConfig,
   isConfiguring,
   useConfiguratorState,
 } from "@/configurator";
@@ -284,11 +287,50 @@ const useAddDataset = () => {
           currentComponents,
           componentQueryResult.data.dataCubesComponents
         );
+
+        const addDatasetOptions = {
+          iri,
+          joinBy: joinBy,
+        };
+        const nextState = JSON.parse(
+          JSON.stringify(state)
+        ) as ConfiguratorStateConfiguringChart;
+        addDatasetInConfig(nextState, addDatasetOptions);
+
+        const allCubes = uniqBy(
+          nextState.chartConfigs.flatMap((x) => x.cubes),
+          (x) => x.iri
+        );
+        const res = await executeDataCubesComponentsQuery({
+          locale: locale,
+          sourceType,
+          sourceUrl,
+          cubeFilters: allCubes.map((cube) => ({
+            iri: cube.iri,
+            joinBy: cube.joinBy,
+            loadValues: true,
+          })),
+        });
+
+        if (res.error || !res.data) {
+          throw new Error("Could not fetch dimensions and measures");
+        }
         dispatch({
           type: "DATASET_ADD",
+          value: addDatasetOptions,
+        });
+        const { dimensions, measures } = res.data.dataCubesComponents;
+        const possibleType = getPossibleChartTypes({
+          dimensions: dimensions,
+          measures: measures,
+          cubeCount: allCubes.length,
+        });
+        dispatch({
+          type: "CHART_TYPE_CHANGED",
           value: {
-            iri,
-            joinBy: joinBy,
+            locale,
+            chartKey: state.activeChartKey,
+            chartType: possibleType[0],
           },
         });
       } finally {

diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
@@ -623,6 +623,7 @@ const getInitialConfiguringConfigBasedOnCube = ({
   const possibleChartTypes = getPossibleChartTypes({
     dimensions: dataCubesComponents.dimensions,
     measures: dataCubesComponents.measures,
+    cubeCount: cubeIris.length,
   });
   const chartConfig = deriveFiltersFromFields(
     getInitialConfig({