refactor: Use DataCubeMetadata + ComponentWithHierarchies queries

visualize-admin · Apr 13, 2023 · 827b67e · 827b67e
1 parent a8b5bac
commit 827b67e
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 195 deletions.
diff --git a/app/configurator/components/chart-configurator.tsx b/app/configurator/components/chart-configurator.tsx
@@ -65,10 +65,14 @@ import {
   PossibleFiltersDocument,
   PossibleFiltersQuery,
   PossibleFiltersQueryVariables,
-  useDataCubeMetadataWithComponentValuesAndHierarchiesQuery,
+  useComponentsWithHierarchiesQuery,
+  useDataCubeMetadataQuery,
   useDimensionHierarchyQuery,
 } from "@/graphql/query-hooks";
-import { DataCubeMetadata } from "@/graphql/types";
+import {
+  DataCubeMetadata,
+  DataCubeMetadataWithHierarchies,
+} from "@/graphql/types";
 import { Icon } from "@/icons";
 import { useLocale } from "@/locales/use-locale";
 import useEvent from "@/utils/use-event";
@@ -306,31 +310,48 @@ const useFilterReorder = ({
     unmappedFilters,
   ]);
 
-  const [{ data, fetching: dataFetching }, executeQuery] =
-    useDataCubeMetadataWithComponentValuesAndHierarchiesQuery({
+  const [{ data: metadata, fetching: metadataFetching }, executeMetadataQuery] =
+    useDataCubeMetadataQuery({
       variables: variables,
     });
+  const [
+    { data: components, fetching: componentsFetching },
+    exectueComponentsQuery,
+  ] = useComponentsWithHierarchiesQuery({
+    variables: variables,
+  });
 
   useEffect(() => {
-    executeQuery({
+    executeMetadataQuery({
+      variables,
+    });
+    exectueComponentsQuery({
       variables,
     });
-  }, [variables, executeQuery]);
+  }, [variables, executeMetadataQuery, exectueComponentsQuery]);
 
   const dimensions = useMemo(() => {
-    const dimensions = data?.dataCubeByIri?.dimensions;
+    const dimensions = components?.dataCubeByIri?.dimensions;
     type T = Exclude<typeof dimensions, undefined>;
-    if (!data?.dataCubeByIri?.dimensions) {
+
+    if (!components?.dataCubeByIri?.dimensions) {
       return [] as T;
     }
+
     return dimensions as T;
-  }, [data?.dataCubeByIri?.dimensions]);
+  }, [components?.dataCubeByIri?.dimensions]);
 
-  const metaData = data?.dataCubeByIri;
+  const data =
+    metadata && components
+      ? ({
+          ...metadata.dataCubeByIri,
+          ...components.dataCubeByIri,
+        } as DataCubeMetadataWithHierarchies)
+      : null;
 
   // Handlers
   const handleMove = useEvent((dimensionIri: string, delta: number) => {
-    if (!metaData) {
+    if (!data) {
       return;
     }
 
@@ -345,7 +366,7 @@ const useFilterReorder = ({
       type: "CHART_CONFIG_REPLACED",
       value: {
         chartConfig,
-        dataSetMetadata: metaData,
+        dataSetMetadata: data,
       },
     });
   });
@@ -388,7 +409,8 @@ const useFilterReorder = ({
   const { fetching: possibleFiltersFetching } = useEnsurePossibleFilters({
     state,
   });
-  const fetching = possibleFiltersFetching || dataFetching;
+  const fetching =
+    possibleFiltersFetching || metadataFetching || componentsFetching;
 
   const { filterDimensions, addableDimensions } = useMemo(() => {
     const keysOrder = Object.fromEntries(
@@ -564,7 +586,7 @@ export const ChartConfigurator = ({
 
   const classes = useStyles({ fetching });
 
-  if (!data?.dataCubeByIri) {
+  if (!data) {
     return (
       <>
         <ControlSectionSkeleton />
@@ -593,10 +615,7 @@ export const ChartConfigurator = ({
           role="tablist"
           aria-labelledby="controls-design"
         >
-          <ChartFields
-            chartConfig={state.chartConfig}
-            metaData={data.dataCubeByIri}
-          />
+          <ChartFields chartConfig={state.chartConfig} metaData={data} />
         </ControlSectionContent>
       </ControlSection>
       {filterDimensions.length === 0 &&

diff --git a/app/configurator/components/chart-controls/drag-and-drop-tab.tsx b/app/configurator/components/chart-controls/drag-and-drop-tab.tsx
@@ -14,7 +14,7 @@ import { getIconName } from "@/configurator/components/ui-helpers";
 import { useActiveFieldField } from "@/configurator/config-form";
 import { TableColumn } from "@/configurator/config-types";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
-import { DataCubeMetadata } from "@/graphql/types";
+import { DataCubeMetadataWithHierarchies } from "@/graphql/types";
 import { Icon } from "@/icons";
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -36,7 +36,7 @@ type Props = {
   id: string;
   title: ReactNode;
   items: TableColumn[];
-  metaData: DataCubeMetadata;
+  metaData: DataCubeMetadataWithHierarchies;
   isDropDisabled?: boolean;
   emptyComponent?: React.ReactNode;
 };