Skip to content

Commit

Permalink
feat: Disable chart field select element when hierarchy is being fetched
Browse files Browse the repository at this point in the history
  • Loading branch information
bprusinowski committed Oct 27, 2022
1 parent 008dba9 commit 782a331
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 15 deletions.
31 changes: 28 additions & 3 deletions app/configurator/components/field.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { t } from "@lingui/macro";
import { CircularProgress, Theme } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { extent, timeFormat, TimeLocaleObject, timeParse } from "d3";
import get from "lodash/get";
import { ChangeEvent, ReactNode, useCallback, useMemo, useState } from "react";
Expand Down Expand Up @@ -53,6 +55,15 @@ import { IconName } from "@/icons";
import { useLocale } from "@/locales/use-locale";
import { getPalette } from "@/palettes";

const useStyles = makeStyles<Theme>((theme) => ({
loadingIndicator: {
color: theme.palette.grey[700],
display: "inline-block",
marginTop: theme.spacing(1),
marginLeft: theme.spacing(2),
},
}));

export const ControlTabField = ({
component,
value,
Expand Down Expand Up @@ -625,7 +636,8 @@ export const ChartFieldField = ({
optional?: boolean;
disabled?: boolean;
}) => {
const fieldProps = useChartFieldField({ field });
const classes = useStyles();
const { fetching, ...fieldProps } = useChartFieldField({ field });

const noneLabel = t({
id: "controls.dimension.none",
Expand All @@ -641,8 +653,21 @@ export const ChartFieldField = ({
<Select
key={`select-${field}-dimension`}
id={field}
label={optional ? `${label} (${optionalLabel})` : label}
disabled={disabled}
label={
<>
{optional ? (
<span>
{label} ({optionalLabel})
</span>
) : (
<span>{label}</span>
)}
{fetching ? (
<CircularProgress size={12} className={classes.loadingIndicator} />
) : null}
</>
}
disabled={disabled || fetching}
options={
optional
? [
Expand Down
41 changes: 29 additions & 12 deletions app/configurator/config-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ import React, {
InputHTMLAttributes,
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import { useClient } from "urql";

Expand Down Expand Up @@ -65,16 +68,28 @@ export const useChartFieldField = ({
field,
}: {
field: string;
}): SelectProps => {
}): SelectProps & {
fetching: boolean;
} => {
const unmountedRef = useRef(false);
const [fetching, setFetching] = useState(false);
const [state, dispatch] = useConfiguratorState();
const client = useClient();
const locale = useLocale();

useEffect(() => {
return () => {
unmountedRef.current = true;
};
}, []);

const onChange = useEvent(async (e: SelectChangeEvent<unknown>) => {
if (!state.dataSet) {
return;
}

if (e.target.value !== FIELD_VALUE_NONE) {
setFetching(true);
const dimensionIri = e.target.value as string;
const { data: hierarchyData } = await client
.query<DimensionHierarchyQuery, DimensionHierarchyQueryVariables>(
Expand All @@ -90,19 +105,20 @@ export const useChartFieldField = ({
.toPromise();
const tree = hierarchyData?.dataCubeByIri?.dimensionByIri
?.hierarchy as HierarchyValue[];

// If the dimension has a hierarchy, we select leaves
const leaves = getLeaves(tree);

dispatch({
type: "CHART_FIELD_CHANGED",
value: {
locale,
field,
componentIri: dimensionIri,
selectedValues: leaves,
},
});
if (!unmountedRef.current) {
dispatch({
type: "CHART_FIELD_CHANGED",
value: {
locale,
field,
componentIri: dimensionIri,
selectedValues: leaves,
},
});
setFetching(false);
}
} else {
dispatch({
type: "CHART_FIELD_DELETED",
Expand All @@ -124,6 +140,7 @@ export const useChartFieldField = ({
name: field,
value,
onChange,
fetching,
};
};

Expand Down

0 comments on commit 782a331

Please sign in to comment.