Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sorting values #983

Merged
merged 9 commits into from
Feb 28, 2023
Merged

Sorting values #983

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9e528a1
feat: Better responsive behavior for iframes
ptbrowne Feb 24, 2023
f2f3992
fix: Parse literals that are fetch in batch
ptbrowne Feb 24, 2023
ad0a9de
feat: Add small caption when no filter has been set
ptbrowne Feb 24, 2023
df63717
fix: Dimension values are correctly sorted in filters
ptbrowne Feb 24, 2023
42b6644
fix: Size of trash icon for optional filter
ptbrowne Feb 24, 2023
fb5ac90
fix: Optional field was badly labeled with [Object object]
ptbrowne Feb 24, 2023
62132ff
fix: Sort values correctly in metadata panel
ptbrowne Feb 24, 2023
f3093d4
fix: Sort selector correctly shows default sorting type if not sortin…
ptbrowne Feb 24, 2023
1b20ce0
fix: Remove unneeded || false
ptbrowne Feb 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 46 additions & 31 deletions app/configurator/components/field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,14 @@ const FieldEditIcon = () => {
};

const useStyles = makeStyles<Theme>((theme) => ({
root: {
display: "flex",
alignItems: "center",
gap: "0.25rem",
},
optional: {
paddingBottom: "4px",
},
loadingIndicator: {
color: theme.palette.grey[700],
display: "inline-block",
Expand Down Expand Up @@ -168,11 +176,6 @@ export const DataFilterSelect = ({
message: `No Filter`,
});

const optionalLabel = t({
id: "controls.select.optional",
message: `optional`,
});

const sortedValues = useMemo(() => {
const sorters = makeDimensionValueSorters(dimension);
const sortedValues = orderBy(
Expand Down Expand Up @@ -219,7 +222,7 @@ export const DataFilterSelect = ({
if (hierarchy && hierarchyOptions) {
return (
<SelectTree
label={isOptional ? `${label} (${optionalLabel})` : label}
label={<FieldLabel label={label} isOptional={isOptional} />}
options={hierarchyOptions}
onClose={handleClose}
onOpen={handleOpen}
Expand All @@ -234,7 +237,7 @@ export const DataFilterSelect = ({
return (
<Select
id={id}
label={isOptional ? `${label} (${optionalLabel})` : label}
label={<FieldLabel label={label} isOptional={isOptional} />}
disabled={disabled}
options={allValues}
sortOptions={false}
Expand Down Expand Up @@ -689,6 +692,34 @@ export const ColorPickerField = ({
);
};

const FieldLabel = ({
label,
isOptional,
isFetching,
}: {
label: React.ReactNode;
isOptional?: boolean;
isFetching?: boolean;
}) => {
const classes = useStyles();
const optionalLabel = t({
id: "controls.select.optional",
message: `optional`,
});
return (
<div className={classes.root}>
{label}

{isOptional ? (
<span className={classes.optional}>({optionalLabel})</span>
) : null}
{isFetching ? (
<CircularProgress size={12} className={classes.loadingIndicator} />
) : null}
</div>
);
};

export const ChartFieldField = ({
label,
field,
Expand All @@ -702,36 +733,23 @@ export const ChartFieldField = ({
optional?: boolean;
disabled?: boolean;
}) => {
const classes = useStyles();
const { fetching, ...fieldProps } = useChartFieldField({ field });

const noneLabel = t({
id: "controls.none",
message: "None",
});

const optionalLabel = t({
id: "controls.select.optional",
message: `optional`,
});

return (
<Select
key={`select-${field}-dimension`}
id={field}
label={
<>
{optional ? (
<span>
{label} ({optionalLabel})
</span>
) : (
<span>{label}</span>
)}
{fetching ? (
<CircularProgress size={12} className={classes.loadingIndicator} />
) : null}
</>
<FieldLabel
isOptional={optional || false}
ptbrowne marked this conversation as resolved.
Show resolved Hide resolved
isFetching={fetching}
label={label}
/>
}
disabled={disabled || fetching}
options={
Expand Down Expand Up @@ -882,11 +900,6 @@ export const ChartOptionSelectField = <ValueType extends {} = string>({
message: "None",
});

const optionalLabel = t({
id: "controls.select.optional",
message: "optional",
});

const allOptions = useMemo(() => {
return isOptional
? [
Expand All @@ -904,7 +917,9 @@ export const ChartOptionSelectField = <ValueType extends {} = string>({
<Select
id={id}
disabled={disabled}
label={isOptional ? `${label} (${optionalLabel})` : label}
label={
<FieldLabel isOptional={isOptional} isFetching={false} label={label} />
}
options={allOptions}
{...fieldProps}
/>
Expand Down