diff --git a/app/charts/index.spec.ts b/app/charts/index.spec.ts index 48bd97bf0..039df3607 100644 --- a/app/charts/index.spec.ts +++ b/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"]); }); diff --git a/app/charts/index.ts b/app/charts/index.ts index a9c8a77b7..154dda04b 100644 --- a/app/charts/index.ts +++ b/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); diff --git a/app/components/debug-search.tsx b/app/components/debug-search.tsx index 35d33f713..f18678c2b 100644 --- a/app/components/debug-search.tsx +++ b/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", diff --git a/app/components/label.tsx b/app/components/label.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/app/components/react-day-picker-custom-styles.css b/app/components/react-day-picker-custom-styles.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/app/configurator/components/chart-controls/color-ramp.tsx b/app/configurator/components/chart-controls/color-ramp.tsx index 9a1930c3f..42d4041fe 100644 --- a/app/configurator/components/chart-controls/color-ramp.tsx +++ b/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,7 +65,6 @@ export const ColorRamp = ({ type ColorRampFieldProps = Omit & { field: string; path: string; - dataSetMetadata: DataCubeMetadata; }; export const ColorRampField = ({ @@ -73,8 +72,8 @@ export const ColorRampField = ({ 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, }, }); diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx index b691acefa..5bc1ff184 100644 --- a/app/configurator/components/chart-options-selector.tsx +++ b/app/configurator/components/chart-options-selector.tsx @@ -281,7 +281,6 @@ const EncodingOptionsPanel = ({ label={getFieldLabelHint[encoding.field]} optional={encoding.optional} options={options} - dataSetMetadata={metaData} /> {encoding.options && ( )} {optionsByField["color"]?.field === "color" && @@ -306,7 +304,7 @@ const EncodingOptionsPanel = ({ {/* FIXME: should be generic or shouldn't be a field at all */} {field === "baseLayer" ? ( - + ) : null} {encoding.sorting && isDimensionSortable(component) && ( @@ -314,7 +312,6 @@ const EncodingOptionsPanel = ({ 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} /> @@ -434,13 +430,11 @@ const ChartFieldOptions = ({ chartType, encodingOptions, disabled = false, - dataSetMetadata, }: { field: string; chartType: ChartType; encodingOptions?: EncodingOption[]; disabled?: boolean; - dataSetMetadata: DataCubeMetadata; }) => { return ( <> @@ -460,7 +454,6 @@ const ChartFieldOptions = ({ path="type" value={"stacked"} disabled={disabled} - dataSetMetadata={dataSetMetadata} /> @@ -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} /> @@ -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} /> ) : colorType === "categorical" ? ( @@ -772,7 +759,6 @@ const ChartFieldColorComponent = ({ field={field} path="color.palette" nbClass={nbClass} - dataSetMetadata={dataSetMetadata} /> {nbOptions >= 3 && ( @@ -802,7 +787,6 @@ const ChartFieldColorComponent = ({ field={field} path="color.scaleType" value="discrete" - dataSetMetadata={dataSetMetadata} /> )} @@ -842,7 +826,6 @@ const ChartFieldColorComponent = ({ value: "jenks", }, ]} - dataSetMetadata={dataSetMetadata} /> id="number-of-colors" @@ -854,7 +837,6 @@ const ChartFieldColorComponent = ({ path="color.nbClass" options={nbColorOptions} getValue={(d) => +d} - dataSetMetadata={dataSetMetadata} /> ) : 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,12 +947,12 @@ 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, }, }); } @@ -979,14 +960,14 @@ const ChartMapBaseLayerSettings = ({ 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 ( @@ -1001,7 +982,6 @@ const ChartMapBaseLayerSettings = ({ })} field={null} path="baseLayer.show" - dataSetMetadata={dataSetMetadata} /> diff --git a/app/configurator/components/chart-type-selector.tsx b/app/configurator/components/chart-type-selector.tsx index d1f46ab13..62405ef8d 100644 --- a/app/configurator/components/chart-type-selector.tsx +++ b/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 ; } - const metaData = data.dataCubeByIri; - const possibleChartTypes = getPossibleChartType({ meta: metaData }); + const possibleChartTypes = getPossibleChartType({ metadata }); return ( diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx index 6c43af2a2..082ad51ac 100644 --- a/app/configurator/components/field.tsx +++ b/app/configurator/components/field.tsx @@ -46,8 +46,8 @@ import { FIELD_VALUE_NONE } from "@/configurator/constants"; import { truthy } from "@/domain/types"; import { useTimeFormatLocale } from "@/formatters"; import { DimensionMetadataFragment, TimeUnit } from "@/graphql/query-hooks"; -import { DataCubeMetadata } from "@/graphql/types"; import { IconName } from "@/icons"; +import { useLocale } from "@/locales/use-locale"; import { getPalette } from "@/palettes"; export const ControlTabField = ({ @@ -70,7 +70,7 @@ export const ControlTabField = ({ labelId={labelId} checked={field.checked} onClick={field.onClick} - > + /> ); }; @@ -437,7 +437,7 @@ export const AnnotatorTabField = ({ value={`${fieldProps.value}`} checked={fieldProps.checked} onClick={fieldProps.onClick} - > + /> ); }; @@ -569,7 +569,7 @@ export const SingleFilterField = ({ value, }); - return ; + return ; }; export const ColorPickerField = ({ @@ -577,14 +577,13 @@ export const ColorPickerField = ({ path, label, disabled, - dataSetMetadata, }: { field: string; path: string; label: ReactNode; disabled?: boolean; - dataSetMetadata: DataCubeMetadata; }) => { + const locale = useLocale(); const [state, dispatch] = useConfiguratorState(); const updateColor = useCallback( @@ -592,13 +591,13 @@ export const ColorPickerField = ({ dispatch({ type: "CHART_OPTION_CHANGED", value: { + locale, field, path, - dataSetMetadata, value, }, }), - [dispatch, field, path, dataSetMetadata] + [locale, dispatch, field, path] ); if (state.state !== "CONFIGURING_CHART") { @@ -632,19 +631,14 @@ export const ChartFieldField = ({ options, optional, disabled, - dataSetMetadata, }: { label: string; field: string; options: Option[]; optional?: boolean; disabled?: boolean; - dataSetMetadata: DataCubeMetadata; }) => { - const fieldProps = useChartFieldField({ - field, - dataSetMetadata, - }); + const fieldProps = useChartFieldField({ field }); const noneLabel = t({ id: "controls.dimension.none", @@ -686,7 +680,6 @@ export const ChartOptionRadioField = ({ value, defaultChecked, disabled = false, - dataSetMetadata, }: { label: string; field: string | null; @@ -694,13 +687,11 @@ export const ChartOptionRadioField = ({ value: string; defaultChecked?: boolean; disabled?: boolean; - dataSetMetadata: DataCubeMetadata; }) => { const fieldProps = useChartOptionRadioField({ path, field, value, - dataSetMetadata, }); return ( @@ -709,7 +700,7 @@ export const ChartOptionRadioField = ({ label={label} {...fieldProps} checked={fieldProps.checked ?? defaultChecked} - > + /> ); }; @@ -722,7 +713,6 @@ export const ChartOptionSliderField = ({ max = 1, step = 0.1, defaultValue, - dataSetMetadata, }: { label: string; field: string | null; @@ -732,7 +722,6 @@ export const ChartOptionSliderField = ({ max?: number; step?: number; defaultValue: number; - dataSetMetadata: DataCubeMetadata; }) => { const fieldProps = useChartOptionSliderField({ path, @@ -740,7 +729,6 @@ export const ChartOptionSliderField = ({ min, max, defaultValue, - dataSetMetadata, }); return ( @@ -761,20 +749,17 @@ export const ChartOptionCheckboxField = ({ path, defaultValue = false, disabled = false, - dataSetMetadata, }: { label: string; field: string | null; path: string; defaultValue?: boolean; disabled?: boolean; - dataSetMetadata: DataCubeMetadata; }) => { const fieldProps = useChartOptionBooleanField({ field, path, defaultValue, - dataSetMetadata, }); return ( @@ -783,7 +768,7 @@ export const ChartOptionCheckboxField = ({ label={label} {...fieldProps} checked={fieldProps.checked ?? defaultValue} - > + /> ); }; @@ -796,7 +781,6 @@ export const ChartOptionSelectField = ({ options, getValue, getKey, - dataSetMetadata, isOptional, }: { id: string; @@ -807,7 +791,6 @@ export const ChartOptionSelectField = ({ options: Option[]; getValue?: (x: string) => ValueType | undefined; getKey?: (x: ValueType) => string; - dataSetMetadata: DataCubeMetadata; isOptional?: boolean; }) => { const fieldProps = useChartOptionSelectField({ @@ -815,7 +798,6 @@ export const ChartOptionSelectField = ({ path, getValue, getKey, - dataSetMetadata, }); const noneLabel = t({ id: "controls.dimension.none", @@ -857,20 +839,17 @@ export const ChartOptionSwitchField = ({ path, defaultValue = false, disabled = false, - dataSetMetadata, }: { label: string; field: string | null; path: string; defaultValue?: boolean; disabled?: boolean; - dataSetMetadata: DataCubeMetadata; }) => { const fieldProps = useChartOptionBooleanField({ field, path, defaultValue, - dataSetMetadata, }); return ( @@ -879,7 +858,7 @@ export const ChartOptionSwitchField = ({ label={label} {...fieldProps} checked={fieldProps.checked ?? defaultValue} - > + /> ); }; diff --git a/app/configurator/config-form.tsx b/app/configurator/config-form.tsx index fb344554a..18d580ac6 100644 --- a/app/configurator/config-form.tsx +++ b/app/configurator/config-form.tsx @@ -24,15 +24,10 @@ import { DimensionValuesQuery, } from "@/graphql/query-hooks"; import { HierarchyValue } from "@/graphql/resolver-types"; -import { DataCubeMetadata } from "@/graphql/types"; import { useLocale } from "@/locales/use-locale"; import { dfs } from "@/utils/dfs"; import useEvent from "@/utils/use-event"; -// interface FieldProps { -// name: HTMLInputElement["name"] -// onChange: []; -// } export type Option = { value: string | $FixMe; label: string | $FixMe; @@ -68,10 +63,8 @@ const getLeaves = (tree: HierarchyValue[], limit?: number) => { export const useChartFieldField = ({ field, - dataSetMetadata, }: { field: string; - dataSetMetadata: DataCubeMetadata; }): SelectProps => { const [state, dispatch] = useConfiguratorState(); const client = useClient(); @@ -104,8 +97,8 @@ export const useChartFieldField = ({ dispatch({ type: "CHART_FIELD_CHANGED", value: { + locale, field, - dataSetMetadata, componentIri: dimensionIri, selectedValues: leaves, }, @@ -114,8 +107,8 @@ export const useChartFieldField = ({ dispatch({ type: "CHART_FIELD_DELETED", value: { + locale, field, - dataSetMetadata, }, }); } @@ -139,14 +132,13 @@ export const useChartOptionSelectField = ({ path, getValue, getKey, - dataSetMetadata, }: { field: string; path: string; getValue?: (key: string) => ValueType | undefined; getKey?: (value: ValueType) => string; - dataSetMetadata: DataCubeMetadata; }): SelectProps => { + const locale = useLocale(); const [state, dispatch] = useConfiguratorState(); const onChange = useCallback<(e: SelectChangeEvent) => void>( @@ -155,14 +147,14 @@ export const useChartOptionSelectField = ({ dispatch({ type: "CHART_OPTION_CHANGED", value: { + locale, field, path, - dataSetMetadata, value: getValue ? getValue(value) : value, }, }); }, - [dispatch, field, path, getValue, dataSetMetadata] + [locale, dispatch, field, path, getValue] ); let value: ValueType | undefined; @@ -209,15 +201,14 @@ export const useChartOptionSliderField = ({ min, max, defaultValue, - dataSetMetadata, }: { field: string | null; path: string; min: number; max: number; defaultValue: number; - dataSetMetadata: DataCubeMetadata; }) => { + const locale = useLocale(); const [state, dispatch] = useConfiguratorState(); const onChange = useEvent((e: ChangeEvent) => { @@ -228,9 +219,9 @@ export const useChartOptionSliderField = ({ dispatch({ type: "CHART_OPTION_CHANGED", value: { + locale, field, path, - dataSetMetadata, value: Math.max(min, Math.min(+value, max)), }, }); @@ -253,26 +244,25 @@ export const useChartOptionRadioField = ({ field, path, value, - dataSetMetadata, }: { field: string | null; path: string; value: string; - dataSetMetadata: DataCubeMetadata; }): FieldProps => { + const locale = useLocale(); const [state, dispatch] = useConfiguratorState(); const onChange = useCallback(() => { dispatch({ type: "CHART_OPTION_CHANGED", value: { + locale, field, path, - dataSetMetadata, value, }, }); - }, [dispatch, field, path, value, dataSetMetadata]); + }, [locale, dispatch, field, path, value]); const stateValue = state.state === "CONFIGURING_CHART" ? getChartOptionField(state, field, path) @@ -291,13 +281,12 @@ export const useChartOptionBooleanField = ({ path, field, defaultValue = "", - dataSetMetadata, }: { path: string; field: string | null; defaultValue: boolean | string; - dataSetMetadata: DataCubeMetadata; }): FieldProps => { + const locale = useLocale(); const [state, dispatch] = useConfiguratorState(); const onChange = useCallback<(e: ChangeEvent) => void>( @@ -305,14 +294,14 @@ export const useChartOptionBooleanField = ({ dispatch({ type: "CHART_OPTION_CHANGED", value: { + locale, path, field, - dataSetMetadata, value: e.currentTarget.checked, }, }); }, - [dispatch, path, field, dataSetMetadata] + [locale, dispatch, path, field] ); const stateValue = state.state === "CONFIGURING_CHART" @@ -353,24 +342,18 @@ export const useActiveFieldField = ({ }; // Specific ------------------------------------------------------------------ -export const useChartType = ({ - metadata, -}: { - metadata: DataCubeMetadata | null | undefined; -}): { +export const useChartType = (): { value: ChartType; onChange: (chartType: ChartType) => void; } => { + const locale = useLocale(); const [state, dispatch] = useConfiguratorState(); const onChange = useEvent((chartType: ChartType) => { - if (!metadata) { - return; - } dispatch({ type: "CHART_TYPE_CHANGED", value: { + locale, chartType, - dataSetMetadata: metadata, }, }); }); diff --git a/app/configurator/configurator-state.spec.tsx b/app/configurator/configurator-state.spec.tsx index fbe628841..cb381f2aa 100644 --- a/app/configurator/configurator-state.spec.tsx +++ b/app/configurator/configurator-state.spec.tsx @@ -403,7 +403,7 @@ describe("retainChartConfigWhenSwitchingChartType", () => { measures: dataSetMetadata.measures, }) ); - deriveFiltersFromFields(newConfig, dataSetMetadata); + deriveFiltersFromFields(newConfig, dataSetMetadata.dimensions); return current(newConfig); }; diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx index f6ebc00ff..d4e62a450 100644 --- a/app/configurator/configurator-state.tsx +++ b/app/configurator/configurator-state.tsx @@ -32,6 +32,7 @@ import { DEFAULT_FIXED_COLOR_FIELD } from "@/charts/map/constants"; import { mapValueIrisToColor } from "@/configurator/components/ui-helpers"; import { ConfiguratorStateConfiguringChart, + ConfiguratorStateDescribingChart, DataSource, GenericField, ImputationType, @@ -64,6 +65,7 @@ import { isNumericalMeasure, } from "@/domain/data"; import { DEFAULT_DATA_SOURCE } from "@/domain/datasource"; +import { client } from "@/graphql/client"; import { DataCubeMetadataWithComponentValuesDocument, DataCubeMetadataWithComponentValuesQuery, @@ -71,6 +73,7 @@ import { DimensionMetadataFragment, } from "@/graphql/query-hooks"; import { DataCubeMetadata } from "@/graphql/types"; +import { Locale } from "@/locales/locales"; import { useLocale } from "@/locales/use-locale"; import { findInHierarchy } from "@/rdf/tree-utils"; import { @@ -88,8 +91,14 @@ import { unreachableError } from "@/utils/unreachable"; export const DEFAULT_PALETTE = "category10"; export type ConfiguratorStateAction = - | { type: "INITIALIZED"; value: ConfiguratorState } - | { type: "STEP_NEXT"; dataSetMetadata: DataCubeMetadata } + | { + type: "INITIALIZED"; + value: ConfiguratorState; + } + | { + type: "STEP_NEXT"; + dataSetMetadata: DataCubeMetadata; + } | { type: "STEP_PREVIOUS"; to?: Exclude; @@ -104,7 +113,10 @@ export type ConfiguratorStateAction = } | { type: "CHART_TYPE_CHANGED"; - value: { chartType: ChartType; dataSetMetadata: DataCubeMetadata }; + value: { + locale: Locale; + chartType: ChartType; + }; } | { type: "ACTIVE_FIELD_CHANGED"; @@ -113,18 +125,18 @@ export type ConfiguratorStateAction = | { type: "CHART_FIELD_CHANGED"; value: { + locale: Locale; field: string; componentIri: string; - dataSetMetadata: DataCubeMetadata; selectedValues?: $FixMe[]; }; } | { type: "CHART_OPTION_CHANGED"; value: { + locale: Locale; path: string; field: string | null; - dataSetMetadata: DataCubeMetadata; value: | string | number @@ -164,8 +176,8 @@ export type ConfiguratorStateAction = | { type: "CHART_FIELD_DELETED"; value: { + locale: Locale; field: string; - dataSetMetadata: DataCubeMetadata; }; } | { @@ -275,6 +287,23 @@ const emptyState: ConfiguratorStateSelectingDataSet = { activeField: undefined, }; +const getCachedCubeMetadataWithComponentValues = ( + draft: ConfiguratorStateConfiguringChart | ConfiguratorStateDescribingChart, + locale: Locale +) => { + const query = client.readQuery< + DataCubeMetadataWithComponentValuesQuery, + DataCubeMetadataWithComponentValuesQueryVariables + >(DataCubeMetadataWithComponentValuesDocument, { + iri: draft.dataSet, + locale, + sourceType: draft.dataSource.type, + sourceUrl: draft.dataSource.url, + }); + + return query?.data?.dataCubeByIri; +}; + export const getFilterValue = ( state: ConfiguratorState, dimensionIri: string @@ -347,7 +376,7 @@ export const moveFilterField = produce( ); export const deriveFiltersFromFields = produce( - (chartConfig: ChartConfig, { dimensions }: DataCubeMetadata) => { + (chartConfig: ChartConfig, dimensions: DimensionMetadataFragment[]) => { const { chartType, fields, filters } = chartConfig; if (chartType === "table") { @@ -517,7 +546,7 @@ const transitionStepNext = ( case "SELECTING_DATASET": if (draft.dataSet) { const possibleChartTypes = getPossibleChartType({ - meta: dataSetMetadata, + metadata: dataSetMetadata, }); const chartConfig = deriveFiltersFromFields( @@ -526,7 +555,7 @@ const transitionStepNext = ( dimensions: dataSetMetadata.dimensions, measures: dataSetMetadata.measures, }), - dataSetMetadata + dataSetMetadata.dimensions ); return { @@ -708,16 +737,22 @@ const handleChartFieldChanged = ( } const { + locale, field, componentIri, - dataSetMetadata, selectedValues: actionSelectedValues, } = action.value; + + const metadata = getCachedCubeMetadataWithComponentValues(draft, locale); + const { dimensions = [], measures = [] } = metadata || { + dimensions: [], + measures: [], + }; + const f = get(draft.chartConfig.fields, field); - const component = [ - ...dataSetMetadata.dimensions, - ...dataSetMetadata.measures, - ].find((dim) => dim.iri === componentIri); + const component = [...dimensions, ...measures].find( + (dim) => dim.iri === componentIri + ); const selectedValues = actionSelectedValues ? actionSelectedValues : component?.values || []; @@ -763,17 +798,17 @@ const handleChartFieldChanged = ( } else if (isMapConfig(draft.chartConfig)) { if (field === "areaLayer") { draft.chartConfig.fields.areaLayer = getInitialAreaLayer({ - component: dataSetMetadata.dimensions + component: dimensions .filter(isGeoShapesDimension) .find((d) => d.iri === componentIri)!, - measure: dataSetMetadata.measures[0], + measure: measures[0], }); } else if (field === "symbolLayer") { draft.chartConfig.fields.symbolLayer = getInitialSymbolLayer({ - component: dataSetMetadata.dimensions + component: dimensions .filter(isGeoDimension) .find((d) => d.iri === componentIri)!, - measure: dataSetMetadata.measures.filter(isNumericalMeasure)[0], + measure: measures.filter(isNumericalMeasure)[0], }); } } @@ -830,10 +865,7 @@ const handleChartFieldChanged = ( } } - draft.chartConfig = deriveFiltersFromFields( - draft.chartConfig, - action.value.dataSetMetadata - ); + draft.chartConfig = deriveFiltersFromFields(draft.chartConfig, dimensions); return draft; }; @@ -891,23 +923,29 @@ const reducer: Reducer = ( draft.state === "CONFIGURING_CHART" || draft.state === "DESCRIBING_CHART" ) { - // setWith(draft, action.value.path, action.value.value, Object); - const { chartType, dataSetMetadata } = action.value; - - const previousConfig = current(draft.chartConfig); - draft.chartConfig = getChartConfigAdjustedToChartType({ - chartConfig: previousConfig, - newChartType: chartType, - dimensions: dataSetMetadata.dimensions, - measures: dataSetMetadata.measures, - }); - draft.activeField = undefined; - - draft.chartConfig = deriveFiltersFromFields( - draft.chartConfig, - dataSetMetadata + const { locale, chartType } = action.value; + const metadata = getCachedCubeMetadataWithComponentValues( + draft, + locale ); + + if (metadata) { + const { dimensions, measures } = metadata; + const previousConfig = current(draft.chartConfig); + draft.chartConfig = getChartConfigAdjustedToChartType({ + chartConfig: previousConfig, + newChartType: chartType, + dimensions, + measures, + }); + draft.activeField = undefined; + draft.chartConfig = deriveFiltersFromFields( + draft.chartConfig, + metadata.dimensions + ); + } } + return draft; case "ACTIVE_FIELD_CHANGED": @@ -925,11 +963,18 @@ const reducer: Reducer = ( if (draft.state === "CONFIGURING_CHART") { delete (draft.chartConfig.fields as GenericFields)[action.value.field]; + const metadata = getCachedCubeMetadataWithComponentValues( + draft, + action.value.locale + ); + const dimensions = metadata?.dimensions || []; + draft.chartConfig = deriveFiltersFromFields( draft.chartConfig, - action.value.dataSetMetadata + dimensions ); } + return draft; case "CHART_OPTION_CHANGED": @@ -949,10 +994,13 @@ const reducer: Reducer = ( setWith(draft, nbClassPath, 3, Object); } } else if (action.value.path === "color.componentIri") { - const allComponents = [ - ...action.value.dataSetMetadata.dimensions, - ...action.value.dataSetMetadata.measures, - ]; + const metadata = getCachedCubeMetadataWithComponentValues( + draft, + action.value.locale + ); + const allComponents = metadata + ? [...metadata.dimensions, ...metadata.measures] + : []; const component = allComponents.find( (d) => d.iri === action.value.value ); @@ -1117,9 +1165,10 @@ const reducer: Reducer = ( if (draft.state === "CONFIGURING_CHART") { draft.chartConfig = deriveFiltersFromFields( action.value.chartConfig, - action.value.dataSetMetadata + action.value.dataSetMetadata.dimensions ); } + return draft; case "CHART_CONFIG_FILTER_SET_SINGLE": diff --git a/app/configurator/table/table-chart-options.tsx b/app/configurator/table/table-chart-options.tsx index 724727ad9..15ffedac0 100644 --- a/app/configurator/table/table-chart-options.tsx +++ b/app/configurator/table/table-chart-options.tsx @@ -146,7 +146,7 @@ export const TableColumnOptions = ({ } if (activeField === "table-settings") { - return ; + return ; } if (activeField === "table-sorting") { return ; @@ -294,14 +294,12 @@ export const TableColumnOptions = ({ getKey={(d) => d.type} field={activeField} path="columnStyle" - dataSetMetadata={metaData} /> @@ -368,12 +366,10 @@ const ColumnStyleSubOptions = ({ chartConfig, activeField, component, - dataSetMetadata, }: { chartConfig: TableConfig; activeField: string; component: DimensionMetadataFragment; - dataSetMetadata: DataCubeMetadata; }) => { const type = chartConfig.fields[activeField].columnStyle.type; return ( @@ -399,7 +395,6 @@ const ColumnStyleSubOptions = ({ ]} field={activeField} path="columnStyle.textStyle" - dataSetMetadata={dataSetMetadata} /> {type === "text" ? ( <> @@ -410,7 +405,6 @@ const ColumnStyleSubOptions = ({ })} field={activeField} path="columnStyle.textColor" - dataSetMetadata={dataSetMetadata} /> ) : type === "category" ? ( @@ -447,7 +440,6 @@ const ColumnStyleSubOptions = ({ })} field={activeField} path="columnStyle.barColorPositive" - dataSetMetadata={dataSetMetadata} /> ) : null} @@ -482,11 +471,7 @@ const ColumnStyleSubOptions = ({ ); }; -const TableSettings = ({ - dataSetMetadata, -}: { - dataSetMetadata: DataCubeMetadata; -}) => { +const TableSettings = () => { return ( @@ -500,7 +485,6 @@ const TableSettings = ({ })} field={null} path="settings.showSearch" - dataSetMetadata={dataSetMetadata} /> diff --git a/app/graphql/context.tsx b/app/graphql/context.tsx index 9a962b59e..4cca4e98c 100644 --- a/app/graphql/context.tsx +++ b/app/graphql/context.tsx @@ -15,6 +15,8 @@ import { import { createGeoCoordinatesLoader } from "../rdf/query-geo-coordinates"; import { createGeoShapesLoader } from "../rdf/query-geo-shapes"; +import { RequestQueryMeta } from "./query-meta"; + const MAX_BATCH_SIZE = 500; const createLoaders = async (locale: string, sparqlClient: ParsingClient) => { return { diff --git a/app/graphql/query-meta.ts b/app/graphql/query-meta.ts index ce4826095..840fbe264 100644 --- a/app/graphql/query-meta.ts +++ b/app/graphql/query-meta.ts @@ -1,4 +1,4 @@ -type RequestQueryMeta = { +export type RequestQueryMeta = { text: string; startTime: number; endTime: number; diff --git a/app/jest.setup.ts b/app/jest.setup.ts index a9b9b0da5..8c72239bd 100644 --- a/app/jest.setup.ts +++ b/app/jest.setup.ts @@ -1,3 +1,7 @@ +import { createClient, defaultExchanges } from "urql"; + +import { GRAPHQL_ENDPOINT } from "./domain/env"; + // @ts-ignore Ignoring cannot be compiled as isolated module warning. It's working. jest.mock("@lingui/macro", () => { return { @@ -7,3 +11,12 @@ jest.mock("@lingui/macro", () => { defineMessage: (x: string) => x, }; }); + +jest.mock("@/graphql/client", () => { + return { + client: createClient({ + url: GRAPHQL_ENDPOINT, + exchanges: [...defaultExchanges], + }), + }; +}); diff --git a/app/rdf/query-search.ts b/app/rdf/query-search.ts index 73fc78c19..5b51f3901 100644 --- a/app/rdf/query-search.ts +++ b/app/rdf/query-search.ts @@ -8,6 +8,7 @@ import StreamClient from "sparql-http-client"; import ParsingClient from "sparql-http-client/ParsingClient"; import { truthy } from "@/domain/types"; +import { RequestQueryMeta } from "@/graphql/query-meta"; import { DataCubeSearchFilter } from "@/graphql/resolver-types"; import { ResolvedDataCube } from "@/graphql/shared-types"; import * as ns from "@/rdf/namespace";