chore: Merge main

Author: bprusinowski

app/charts/shared/chart-data-filters.tsx

@@ -7,31 +7,32 @@ import { ChartFiltersList } from "@/components/chart-filters-list";
 import Flex from "@/components/flex";
 import { Select } from "@/components/form";
 import { Loading } from "@/components/hint";
+import SelectTree from "@/components/select-tree";
 import {
   ChartConfig,
   DataSource,
   InteractiveFiltersDataConfig,
   OptionGroup,
   Option,
 } from "@/configurator";
-import { TimeInput } from "@/configurator/components/field";
+import { hierarchyToOptions, TimeInput } from "@/configurator/components/field";
 import {
   getTimeIntervalFormattedSelectOptions,
   getTimeIntervalWithProps,
 } from "@/configurator/components/ui-helpers";
-import useHierarchyParents from "@/configurator/components/use-hierarchy-parents";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import { isTemporalDimension } from "@/domain/data";
 import { useTimeFormatLocale } from "@/formatters";
 import {
   Dimension,
+  HierarchyValue,
   TemporalDimension,
   TimeUnit,
+  useDimensionHierarchyQuery,
   useDimensionValuesQuery,
 } from "@/graphql/query-hooks";
 import { Icon } from "@/icons";
 import { useLocale } from "@/locales/use-locale";
-import { makeOptionGroups } from "@/utils/hierarchy";
 
 export const ChartDataFilters = ({
   dataSet,
@@ -150,19 +151,25 @@ const DataFilter = ({
     },
   });
 
-  const { data: hierarchyParents } = useHierarchyParents({
-    datasetIri: dataSetIri,
-    dataSource,
-    dimension: data?.dataCubeByIri?.dimensionByIri!,
-    locale,
-    pause: !data?.dataCubeByIri?.dimensionByIri,
+  const dimension = data?.dataCubeByIri?.dimensionByIri;
+
+  const [hierarchyResp] = useDimensionHierarchyQuery({
+    variables: {
+      cubeIri: dataSetIri,
+      dimensionIri: dimension?.iri!,
+      sourceType: dataSource.type,
+      sourceUrl: dataSource.url,
+      locale: locale,
+    },
+    pause: !dimension,
   });
 
-  const optionGroups = React.useMemo(() => {
-    return makeOptionGroups(hierarchyParents);
-  }, [hierarchyParents]);
+  const hierarchy =
+    hierarchyResp.data?.dataCubeByIri?.dimensionByIri?.hierarchy;
 
-  const setDataFilter = (e: SelectChangeEvent<unknown>) => {
+  const setDataFilter = (
+    e: SelectChangeEvent<unknown> | { target: { value: string } }
+  ) => {
     dispatch({
       type: "UPDATE_DATA_FILTER",
       value: { dimensionIri, dimensionValueIri: e.target.value as string },
@@ -195,33 +202,40 @@ const DataFilter = ({
           " > div": { width: "100%" },
         }}
       >
-        {!isTemporalDimension(dimension) ? (
-          <DataFilterBaseDimension
+        {isTemporalDimension(dimension) ? (
+          dimension.timeUnit === TimeUnit.Year ? (
+            <DataFilterTemporalDimension
+              value={value as string}
+              dimension={dimension}
+              onChange={setDataFilter}
+            />
+          ) : null
+        ) : hierarchy ? (
+          <DataFilterHierarchyDimension
             dimension={dimension}
-            optionGroups={optionGroups}
             onChange={setDataFilter}
+            hierarchy={hierarchy}
             value={value as string}
           />
-        ) : dimension.timeUnit === TimeUnit.Year ? (
-          <DataFilterTemporalDimension
-            value={value as string}
+        ) : (
+          <DataFilterGenericDimension
             dimension={dimension}
             onChange={setDataFilter}
+            value={value as string}
           />
-        ) : null}
+        )}
       </Flex>
     );
   } else {
     return <Loading />;
   }
 };
 
-const DataFilterBaseDimension = ({
+const DataFilterGenericDimension = ({
   dimension,
   value,
   onChange,
   options: propOptions,
-  optionGroups,
 }: {
   dimension: Dimension;
   value: string;
@@ -255,14 +269,63 @@ const DataFilterBaseDimension = ({
       id="dataFilterBaseDimension"
       label={label}
       options={allOptions}
-      optionGroups={optionGroups}
       value={value}
       tooltipText={tooltipText || undefined}
       onChange={onChange}
     />
   );
 };
 
+const DataFilterHierarchyDimension = ({
+  dimension,
+  value,
+  onChange,
+  hierarchy,
+}: {
+  dimension: Dimension;
+  value: string;
+  onChange: (e: { target: { value: string } }) => void;
+  hierarchy?: HierarchyValue[];
+}) => {
+  const noneLabel = t({
+    id: "controls.dimensionvalue.none",
+    message: `No Filter`,
+  });
+
+  const {
+    label,
+    isKeyDimension,
+    description: tooltipText,
+    values: dimensionValues,
+  } = dimension;
+  const options = React.useMemo(() => {
+    let opts = [] as { label: string; value: string; isNoneValue?: boolean }[];
+    if (hierarchy) {
+      opts = hierarchyToOptions(hierarchy);
+    } else {
+      opts = dimensionValues;
+    }
+    if (!isKeyDimension) {
+      opts.unshift({
+        value: FIELD_VALUE_NONE,
+        label: noneLabel,
+        isNoneValue: true,
+      });
+    }
+    return opts;
+  }, [hierarchy, isKeyDimension, dimensionValues, noneLabel]);
+
+  return (
+    <SelectTree
+      value={value}
+      options={options}
+      onChange={onChange}
+      label={label}
+      tooltipText={tooltipText || undefined}
+    />
+  );
+};
+
 const DataFilterTemporalDimension = ({
   dimension,
   value,
@@ -300,7 +363,7 @@ const DataFilterTemporalDimension = ({
 
   if (timeIntervalWithProps.range < 100) {
     return (
-      <DataFilterBaseDimension
+      <DataFilterGenericDimension
         dimension={dimension}
         options={timeIntervalOptions}
         value={value}

app/components/form.tsx

@@ -11,6 +11,7 @@ import {
   Input as MUIInput,
   Radio as MUIRadio,
   Select as MUISelect,
+  Skeleton,
   Slider as MUISlider,
   Switch as MUISwitch,
   SelectProps,
@@ -20,7 +21,6 @@ import {
   MenuItem,
   TypographyProps,
   Stack,
-  CircularProgress,
   styled,
   PaperProps,
 } from "@mui/material";
@@ -285,23 +285,17 @@ const LoadingMenuPaper = forwardRef<HTMLDivElement>(
     const loading = useContext(LoadingMenuPaperContext);
     return (
       <MenuPaper {...props} ref={ref}>
-        {props.children}
         {loading ? (
-          <Box
-            px={4}
-            py={2}
-            sx={{
-              position: "sticky",
-              bottom: 0,
-              backgroundColor: "warning.light",
-            }}
-          >
-            <Typography variant="body2">
+          <Box px={4} py={5}>
+            <Typography variant="body2" sx={{ mb: 2 }} color="text.secondary">
               <Trans id="hint.loading.data" />
-              <CircularProgress size={12} color="inherit" />
             </Typography>
+            <Skeleton sx={{ bgcolor: "grey.300" }} />
+            <Skeleton sx={{ bgcolor: "grey.300" }} />
           </Box>
-        ) : null}
+        ) : (
+          props.children
+        )}
       </MenuPaper>
     );
   }
@@ -318,6 +312,8 @@ export const Select = ({
   controls,
   optionGroups,
   tooltipText,
+  open,
+  onClose,
   onOpen,
   loading,
 }: {
@@ -367,7 +363,9 @@ export const Select = ({
           onChange={onChange}
           value={value}
           disabled={disabled}
+          open={open}
           onOpen={onOpen}
+          onClose={onClose}
           MenuProps={{
             PaperProps: {
               // @ts-ignore - It works