refactor: readQuery instead of passing dataSetMetadata

app/charts/index.spec.ts

@@ -40,32 +40,28 @@ describe("possible chart types", () => {
   it("should allow appropriate chart types based on available dimensions", () => {
     const expectedChartTypes = ["area", "column", "line", "pie", "table"];
     const possibleChartTypes = getPossibleChartType({
-      meta: bathingWaterData.data.dataCubeByIri as DataCubeMetadata,
+      metadata: bathingWaterData.data.dataCubeByIri as DataCubeMetadata,
     }).sort();
 
     expect(possibleChartTypes).toEqual(expectedChartTypes);
   });
 
   it("should only allow table if there are only measures available", () => {
-    const meta = {
+    const metadata = {
       dimensions: [],
       measures: [{ __typename: "NumericalMeasure" }],
-    };
-    const possibleChartTypes = getPossibleChartType({
-      meta: meta as any,
-    }).sort();
+    } as any;
+    const possibleChartTypes = getPossibleChartType({ metadata }).sort();
 
     expect(possibleChartTypes).toEqual(["table"]);
   });
 
   it("should only allow column, map, pie and table if only geo dimensions are available", () => {
-    const meta = {
+    const metadata = {
       dimensions: [{ __typename: "GeoShapesDimension" }],
       measures: [{ __typename: "NumericalMeasure" }],
-    };
-    const possibleChartTypes = getPossibleChartType({
-      meta: meta as any,
-    }).sort();
+    } as any;
+    const possibleChartTypes = getPossibleChartType({ metadata }).sort();
 
     expect(possibleChartTypes).toEqual(["column", "map", "pie", "table"]);
   });

app/charts/index.ts

@@ -1064,11 +1064,11 @@ const adjustSegmentSorting = ({
 
 // Helpers
 export const getPossibleChartType = ({
-  meta,
+  metadata,
 }: {
-  meta: DataCubeMetadata;
+  metadata: DataCubeMetadata;
 }): ChartType[] => {
-  const { measures, dimensions } = meta;
+  const { measures, dimensions } = metadata;
 
   const numericalMeasures = measures.filter(isNumericalMeasure);
   const ordinalMeasures = measures.filter(isOrdinalMeasure);

app/components/debug-search.tsx

@@ -18,6 +18,7 @@ import React, {
 } from "react";
 
 import { DataCubeSearchFilter, useDataCubesQuery } from "@/graphql/query-hooks";
+import { RequestQueryMeta } from "@/graphql/query-meta";
 
 const territoryTheme = {
   name: "Territory theme",

app/configurator/components/chart-controls/color-ramp.tsx

@@ -15,7 +15,7 @@ import {
   SequentialPaletteType,
   useConfiguratorState,
 } from "@/configurator";
-import { DataCubeMetadata } from "@/graphql/types";
+import { useLocale } from "@/locales/use-locale";
 import { divergingPalettes, Palette, sequentialPalettes } from "@/palettes";
 import useEvent from "@/utils/use-event";
 
@@ -65,16 +65,15 @@ export const ColorRamp = ({
 type ColorRampFieldProps = Omit<ColorRampProps, "colorInterpolator"> & {
   field: string;
   path: string;
-  dataSetMetadata: DataCubeMetadata;
 };
 
 export const ColorRampField = ({
   field,
   path,
   disabled,
   nbClass,
-  dataSetMetadata,
 }: ColorRampFieldProps) => {
+  const locale = useLocale();
   const [state, dispatch] = useConfiguratorState();
 
   const { palettes, defaultPalette } = useMemo(() => {
@@ -101,9 +100,9 @@ export const ColorRampField = ({
         dispatch({
           type: "CHART_OPTION_CHANGED",
           value: {
+            locale,
             field,
             path,
-            dataSetMetadata,
             value,
           },
         });

app/configurator/components/chart-options-selector.tsx

@@ -281,15 +281,13 @@ const EncodingOptionsPanel = ({
               label={getFieldLabelHint[encoding.field]}
               optional={encoding.optional}
               options={options}
-              dataSetMetadata={metaData}
             />
             {encoding.options && (
               <ChartFieldOptions
                 disabled={!component}
                 field={encoding.field}
                 encodingOptions={encoding.options}
                 chartType={chartType}
-                dataSetMetadata={metaData}
               />
             )}
             {optionsByField["color"]?.field === "color" &&
@@ -306,15 +304,14 @@ const EncodingOptionsPanel = ({
 
       {/* FIXME: should be generic or shouldn't be a field at all */}
       {field === "baseLayer" ? (
-        <ChartMapBaseLayerSettings state={state} dataSetMetadata={metaData} />
+        <ChartMapBaseLayerSettings state={state} />
       ) : null}
 
       {encoding.sorting && isDimensionSortable(component) && (
         <ChartFieldSorting
           state={state}
           field={field}
           encodingSortingOptions={encoding.sorting}
-          dataSetMetadata={metaData}
         />
       )}
 
@@ -352,7 +349,6 @@ const EncodingOptionsPanel = ({
               field={encoding.field}
               defaultValue={true}
               label={t({ id: "controls.section.show-standard-error" })}
-              dataSetMetadata={metaData}
             />
           </ControlSectionContent>
         </ControlSection>
@@ -434,13 +430,11 @@ const ChartFieldOptions = ({
   chartType,
   encodingOptions,
   disabled = false,
-  dataSetMetadata,
 }: {
   field: string;
   chartType: ChartType;
   encodingOptions?: EncodingOption[];
   disabled?: boolean;
-  dataSetMetadata: DataCubeMetadata;
 }) => {
   return (
     <>
@@ -460,15 +454,13 @@ const ChartFieldOptions = ({
                 path="type"
                 value={"stacked"}
                 disabled={disabled}
-                dataSetMetadata={dataSetMetadata}
               />
               <ChartOptionRadioField
                 label={getFieldLabel("grouped")}
                 field={field}
                 path="type"
                 value={"grouped"}
                 disabled={disabled}
-                dataSetMetadata={dataSetMetadata}
               />
             </Flex>
           </Box>
@@ -481,15 +473,14 @@ const ChartFieldSorting = ({
   state,
   field,
   encodingSortingOptions,
-  dataSetMetadata,
   disabled = false,
 }: {
   state: ConfiguratorStateConfiguringChart;
   field: string;
   encodingSortingOptions: EncodingSortingOption[];
-  dataSetMetadata: DataCubeMetadata;
   disabled?: boolean;
 }) => {
+  const locale = useLocale();
   const [, dispatch] = useConfiguratorState();
 
   const getSortingTypeLabel = (type: SortingType) => {
@@ -520,14 +511,14 @@ const ChartFieldSorting = ({
       dispatch({
         type: "CHART_OPTION_CHANGED",
         value: {
+          locale,
           field,
           path: "sorting",
-          dataSetMetadata,
           value: { sortingType, sortingOrder },
         },
       });
     },
-    [dispatch, field, dataSetMetadata]
+    [locale, dispatch, field]
   );
 
   const activeSortingType = get(
@@ -647,7 +638,6 @@ const ChartFieldSize = ({
           path="measureIri"
           options={measuresOptions}
           isOptional={optional}
-          dataSetMetadata={dataSetMetadata}
         />
       </ControlSectionContent>
     </ControlSection>
@@ -726,7 +716,6 @@ const ChartFieldColorComponent = ({
           field={field}
           path="color.componentIri"
           options={measuresOptions}
-          dataSetMetadata={dataSetMetadata}
           isOptional={optional}
         />
 
@@ -739,7 +728,6 @@ const ChartFieldColorComponent = ({
               })}
               field={field}
               path="color.value"
-              dataSetMetadata={dataSetMetadata}
             />
             <ChartOptionSliderField
               field={field}
@@ -752,7 +740,6 @@ const ChartFieldColorComponent = ({
               max={100}
               step={10}
               defaultValue={80}
-              dataSetMetadata={dataSetMetadata}
             />
           </>
         ) : colorType === "categorical" ? (
@@ -772,7 +759,6 @@ const ChartFieldColorComponent = ({
               field={field}
               path="color.palette"
               nbClass={nbClass}
-              dataSetMetadata={dataSetMetadata}
             />
             <FieldSetLegend
               sx={{ mb: 1 }}
@@ -790,7 +776,6 @@ const ChartFieldColorComponent = ({
                 field={field}
                 path="color.scaleType"
                 value="continuous"
-                dataSetMetadata={dataSetMetadata}
               />
 
               {nbOptions >= 3 && (
@@ -802,7 +787,6 @@ const ChartFieldColorComponent = ({
                   field={field}
                   path="color.scaleType"
                   value="discrete"
-                  dataSetMetadata={dataSetMetadata}
                 />
               )}
             </Flex>
@@ -842,7 +826,6 @@ const ChartFieldColorComponent = ({
                   value: "jenks",
                 },
               ]}
-              dataSetMetadata={dataSetMetadata}
             />
             <ChartOptionSelectField<number>
               id="number-of-colors"
@@ -854,7 +837,6 @@ const ChartFieldColorComponent = ({
               path="color.nbClass"
               options={nbColorOptions}
               getValue={(d) => +d}
-              dataSetMetadata={dataSetMetadata}
             />
           </Stack>
         ) : null}
@@ -950,12 +932,11 @@ const ChartImputationType = ({
 
 const ChartMapBaseLayerSettings = ({
   state,
-  dataSetMetadata,
 }: {
   state: ConfiguratorStateConfiguringChart;
-  dataSetMetadata: DataCubeMetadata;
 }) => {
   const chartConfig = state.chartConfig as MapConfig;
+  const locale = useLocale();
   const [_, dispatch] = useConfiguratorState(isConfiguring);
 
   useEffect(() => {
@@ -966,27 +947,27 @@ const ChartMapBaseLayerSettings = ({
         dispatch({
           type: "CHART_OPTION_CHANGED",
           value: {
+            locale,
             field: null,
             // FIXME: shouldn't be a field if not mapped
             // to a component
             path: "baseLayer.bbox",
             value: map.getBounds().toArray(),
-            dataSetMetadata,
           },
         });
       }
     } else {
       dispatch({
         type: "CHART_OPTION_CHANGED",
         value: {
+          locale,
           field: null,
           path: "baseLayer.bbox",
           value: undefined,
-          dataSetMetadata,
         },
       });
     }
-  }, [chartConfig.baseLayer.locked, dispatch, dataSetMetadata]);
+  }, [chartConfig.baseLayer.locked, dispatch, locale]);
 
   return (
     <ControlSection>
@@ -1001,7 +982,6 @@ const ChartMapBaseLayerSettings = ({
           })}
           field={null}
           path="baseLayer.show"
-          dataSetMetadata={dataSetMetadata}
         />
         <ChartOptionSwitchField
           label={t({
@@ -1010,7 +990,6 @@ const ChartMapBaseLayerSettings = ({
           })}
           field={null}
           path="baseLayer.locked"
-          dataSetMetadata={dataSetMetadata}
         />
       </ControlSectionContent>
     </ControlSection>

app/configurator/components/chart-type-selector.tsx

@@ -112,6 +112,7 @@ export const ChartTypeSelector = ({
   sx?: BoxProps["sx"];
 } & BoxProps) => {
   const locale = useLocale();
+  const { value: chartType, onChange: onChangeChartType } = useChartType();
   const [{ data }] = useDataCubeMetadataWithComponentValuesQuery({
     variables: {
       iri: state.dataSet,
@@ -120,16 +121,13 @@ export const ChartTypeSelector = ({
       locale,
     },
   });
-  const { value: chartType, onChange: onChangeChartType } = useChartType({
-    metadata: data?.dataCubeByIri,
-  });
+  const metadata = data?.dataCubeByIri;
 
-  if (!data?.dataCubeByIri) {
+  if (!metadata) {
     return <ControlSectionSkeleton />;
   }
 
-  const metaData = data.dataCubeByIri;
-  const possibleChartTypes = getPossibleChartType({ meta: metaData });
+  const possibleChartTypes = getPossibleChartType({ metadata });
 
   return (
     <Box sx={sx} {...props}>