Merge pull request #1018 from visualize-admin/fix/load-hierarchy-wher…

…e-necessary fix: Selecting top-most hierarchy value by default in filters
visualize-admin · Apr 19, 2023 · 166c2c1 · 166c2c1 · vercel · Apr 19, 2023
2 parents c6b54b5 + 26f2aa7
commit 166c2c1
Show file tree

Hide file tree

Showing 25 changed files with 440 additions and 292 deletions.
diff --git a/app/charts/index.spec.ts b/app/charts/index.spec.ts
@@ -1,6 +1,5 @@
 import { TableFields } from "@/configurator";
-import { DataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
-import { DataCubeMetadata } from "@/graphql/types";
+import { ComponentsQuery } from "@/graphql/query-hooks";
 
 import bathingWaterData from "../test/__fixtures/data/DataCubeMetadataWithComponentValues-bathingWater.json";
 import forestAreaData from "../test/__fixtures/data/forest-area-by-production-region.json";
@@ -12,10 +11,10 @@ describe("initial config", () => {
     const config = getInitialConfig({
       chartType: "table",
       dimensions: forestAreaData.data.dataCubeByIri.dimensions as NonNullable<
-        DataCubeMetadataWithComponentValuesQuery["dataCubeByIri"]
+        ComponentsQuery["dataCubeByIri"]
       >["dimensions"],
       measures: forestAreaData.data.dataCubeByIri.measures as NonNullable<
-        DataCubeMetadataWithComponentValuesQuery["dataCubeByIri"]
+        ComponentsQuery["dataCubeByIri"]
       >["measures"],
     });
     expect(
@@ -40,28 +39,31 @@ describe("possible chart types", () => {
   it("should allow appropriate chart types based on available dimensions", () => {
     const expectedChartTypes = ["area", "column", "line", "pie", "table"];
     const possibleChartTypes = getPossibleChartType({
-      metadata: bathingWaterData.data.dataCubeByIri as DataCubeMetadata,
+      dimensions: bathingWaterData.data.dataCubeByIri.dimensions as NonNullable<
+        ComponentsQuery["dataCubeByIri"]
+      >["dimensions"],
+      measures: bathingWaterData.data.dataCubeByIri.measures as NonNullable<
+        ComponentsQuery["dataCubeByIri"]
+      >["measures"],
     }).sort();
 
     expect(possibleChartTypes).toEqual(expectedChartTypes);
   });
 
   it("should only allow table if there are only measures available", () => {
-    const metadata = {
+    const possibleChartTypes = getPossibleChartType({
       dimensions: [],
-      measures: [{ __typename: "NumericalMeasure" }],
-    } as any;
-    const possibleChartTypes = getPossibleChartType({ metadata }).sort();
+      measures: [{ __typename: "NumericalMeasure" }] as any,
+    });
 
     expect(possibleChartTypes).toEqual(["table"]);
   });
 
   it("should only allow column, map, pie and table if only geo dimensions are available", () => {
-    const metadata = {
-      dimensions: [{ __typename: "GeoShapesDimension" }],
-      measures: [{ __typename: "NumericalMeasure" }],
-    } as any;
-    const possibleChartTypes = getPossibleChartType({ metadata }).sort();
+    const possibleChartTypes = getPossibleChartType({
+      dimensions: [{ __typename: "GeoShapesDimension" }] as any,
+      measures: [{ __typename: "NumericalMeasure" }] as any,
+    }).sort();
 
     expect(possibleChartTypes).toEqual(["column", "map", "pie", "table"]);
   });

diff --git a/app/charts/index.ts b/app/charts/index.ts
@@ -1108,12 +1108,12 @@ const adjustSegmentSorting = ({
 
 // Helpers
 export const getPossibleChartType = ({
-  metadata,
+  dimensions,
+  measures,
 }: {
-  metadata: DataCubeMetadata;
+  dimensions: DimensionMetadataFragment[];
+  measures: DimensionMetadataFragment[];
 }): ChartType[] => {
-  const { measures, dimensions } = metadata;
-
   const numericalMeasures = measures.filter(isNumericalMeasure);
   const ordinalMeasures = measures.filter(isOrdinalMeasure);
   const categoricalDimensions = getCategoricalDimensions(dimensions);

diff --git a/app/components/chart-filters-list.tsx b/app/components/chart-filters-list.tsx
@@ -6,7 +6,7 @@ import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import { ChartConfig, DataSource } from "@/configurator";
 import { isTemporalDimension } from "@/domain/data";
 import { useTimeFormatUnit } from "@/formatters";
-import { useDataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
+import { useComponentsQuery } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
 
 export const ChartFiltersList = ({
@@ -21,7 +21,7 @@ export const ChartFiltersList = ({
   const locale = useLocale();
   const timeFormatUnit = useTimeFormatUnit();
 
-  const [{ data }] = useDataCubeMetadataWithComponentValuesQuery({
+  const [{ data }] = useComponentsQuery({
     variables: {
       iri: dataSetIri,
       sourceType: dataSource.type,

diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
@@ -24,8 +24,8 @@ import { MetadataPanel } from "@/components/metadata-panel";
 import { ChartConfig, DataSource, useConfiguratorState } from "@/configurator";
 import { DataSetTable } from "@/configurator/components/datatable";
 import {
-  DimensionMetadataFragment,
-  useDataCubeMetadataWithComponentValuesQuery,
+  useComponentsQuery,
+  useDataCubeMetadataQuery,
 } from "@/graphql/query-hooks";
 import { DataCubePublicationStatus } from "@/graphql/resolver-types";
 import { useLocale } from "@/locales/use-locale";
@@ -72,7 +72,15 @@ export const ChartPreviewInner = ({
   const [state, dispatch] = useConfiguratorState();
   const locale = useLocale();
   const classes = useStyles();
-  const [{ data: metaData }] = useDataCubeMetadataWithComponentValuesQuery({
+  const [{ data: metadata }] = useDataCubeMetadataQuery({
+    variables: {
+      iri: dataSetIri,
+      sourceType: dataSource.type,
+      sourceUrl: dataSource.url,
+      locale,
+    },
+  });
+  const [{ data: components }] = useComponentsQuery({
     variables: {
       iri: dataSetIri,
       sourceType: dataSource.type,
@@ -89,12 +97,16 @@ export const ChartPreviewInner = ({
 
   const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
 
-  const allDimensions: DimensionMetadataFragment[] = useMemo(() => {
+  const allComponents = useMemo(() => {
+    if (!components?.dataCubeByIri) {
+      return [];
+    }
+
     return [
-      ...(metaData?.dataCubeByIri?.dimensions ?? []),
-      ...(metaData?.dataCubeByIri?.measures ?? []),
+      ...components.dataCubeByIri.dimensions,
+      ...components.dataCubeByIri.measures,
     ];
-  }, [metaData?.dataCubeByIri?.dimensions, metaData?.dataCubeByIri?.measures]);
+  }, [components?.dataCubeByIri]);
 
   return (
     <Flex
@@ -108,7 +120,7 @@ export const ChartPreviewInner = ({
       }}
     >
       <ChartErrorBoundary resetKeys={[state]}>
-        {metaData?.dataCubeByIri?.publicationStatus ===
+        {metadata?.dataCubeByIri?.publicationStatus ===
           DataCubePublicationStatus.Draft && (
           <Box sx={{ mb: 4 }}>
             <HintYellow iconName="datasetError" iconSize={64}>
@@ -154,14 +166,14 @@ export const ChartPreviewInner = ({
                 <MetadataPanel
                   datasetIri={dataSetIri}
                   dataSource={dataSource}
-                  dimensions={allDimensions}
+                  dimensions={allComponents}
                   top={96}
                 />
               </Flex>
               <Head>
                 <title key="title">
                   {state.meta.title[locale] === ""
-                    ? metaData?.dataCubeByIri?.title
+                    ? metadata?.dataCubeByIri?.title
                     : state.meta.title[locale]}{" "}
                   - visualize.admin.ch
                 </title>

diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
@@ -40,8 +40,8 @@ import {
   useIsTrustedDataSource,
 } from "@/domain/datasource";
 import {
-  DimensionMetadataFragment,
-  useDataCubeMetadataWithComponentValuesQuery,
+  useComponentsQuery,
+  useDataCubeMetadataQuery,
 } from "@/graphql/query-hooks";
 import { DataCubePublicationStatus } from "@/graphql/resolver-types";
 import { useLocale } from "@/locales/use-locale";
@@ -139,7 +139,15 @@ export const ChartPublishedInner = ({
   const locale = useLocale();
   const isTrustedDataSource = useIsTrustedDataSource(dataSource);
 
-  const [{ data: metaData }] = useDataCubeMetadataWithComponentValuesQuery({
+  const [{ data: metadata }] = useDataCubeMetadataQuery({
+    variables: {
+      iri: dataSet,
+      sourceType: dataSource.type,
+      sourceUrl: dataSource.url,
+      locale,
+    },
+  });
+  const [{ data: components }] = useComponentsQuery({
     variables: {
       iri: dataSet,
       sourceType: dataSource.type,
@@ -158,20 +166,24 @@ export const ChartPublishedInner = ({
   }, [dataSet, dataSource, chartConfig]);
   const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
 
-  const allDimensions: DimensionMetadataFragment[] = useMemo(() => {
+  const allComponents = useMemo(() => {
+    if (!components?.dataCubeByIri) {
+      return [];
+    }
+
     return [
-      ...(metaData?.dataCubeByIri?.dimensions ?? []),
-      ...(metaData?.dataCubeByIri?.measures ?? []),
+      ...components.dataCubeByIri.dimensions,
+      ...components.dataCubeByIri.measures,
     ];
-  }, [metaData?.dataCubeByIri?.dimensions, metaData?.dataCubeByIri?.measures]);
+  }, [components?.dataCubeByIri]);
 
   const [{ showDownload }] = useEmbedOptions();
 
   return (
     <MetadataPanelStoreContext.Provider value={metadataPanelStore}>
       <Box className={classes.root} ref={rootRef}>
         <ChartErrorBoundary resetKeys={[chartConfig]}>
-          {metaData?.dataCubeByIri?.publicationStatus ===
+          {metadata?.dataCubeByIri?.publicationStatus ===
             DataCubePublicationStatus.Draft && (
             <Box sx={{ mb: 4 }}>
               <HintRed iconName="datasetError" iconSize={64}>
@@ -183,7 +195,7 @@ export const ChartPublishedInner = ({
               </HintRed>
             </Box>
           )}
-          {metaData?.dataCubeByIri?.expires && (
+          {metadata?.dataCubeByIri?.expires && (
             <Box sx={{ mb: 4 }}>
               <HintRed iconName="datasetError" iconSize={64}>
                 <Trans id="dataset.publicationStatus.expires.warning">
@@ -221,7 +233,7 @@ export const ChartPublishedInner = ({
             <MetadataPanel
               datasetIri={dataSet}
               dataSource={dataSource}
-              dimensions={allDimensions}
+              dimensions={allComponents}
               container={rootRef.current}
             />
           </Flex>

diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx
@@ -1,10 +1,10 @@
 import { Trans } from "@lingui/macro";
-import { Box, Popover, Tab, Tabs, Theme, Button } from "@mui/material";
+import { Box, Button, Popover, Tab, Tabs, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import React, {
-  createContext,
   Dispatch,
   ReactNode,
+  createContext,
   useContext,
   useEffect,
   useState,
@@ -18,7 +18,10 @@ import {
 } from "@/configurator";
 import { ChartTypeSelector } from "@/configurator/components/chart-type-selector";
 import { getIconName } from "@/configurator/components/ui-helpers";
-import { useDataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
+import {
+  useComponentsQuery,
+  useDataCubeMetadataQuery,
+} from "@/graphql/query-hooks";
 import { Icon, IconName } from "@/icons";
 import { useLocale } from "@/src";
 import useEvent from "@/utils/use-event";
@@ -155,7 +158,16 @@ const PublishChartButton = () => {
     | ConfiguratorStatePublishing
     | ConfiguratorStateConfiguringChart;
   const locale = useLocale();
-  const [{ data }] = useDataCubeMetadataWithComponentValuesQuery({
+  const [{ data: metadata }] = useDataCubeMetadataQuery({
+    variables: {
+      iri: dataSetIri ?? "",
+      sourceType: state.dataSource.type,
+      sourceUrl: state.dataSource.url,
+      locale,
+    },
+    pause: !dataSetIri,
+  });
+  const [{ data: components }] = useComponentsQuery({
     variables: {
       iri: dataSetIri ?? "",
       sourceType: state.dataSource.type,
@@ -165,10 +177,13 @@ const PublishChartButton = () => {
     pause: !dataSetIri,
   });
   const goNext = useEvent(() => {
-    if (data?.dataCubeByIri) {
+    if (metadata?.dataCubeByIri && components?.dataCubeByIri) {
       dispatch({
         type: "STEP_NEXT",
-        dataSetMetadata: data?.dataCubeByIri,
+        dataSetMetadata: {
+          ...metadata.dataCubeByIri,
+          ...components.dataCubeByIri,
+        },
       });
     }
   });
@@ -177,7 +192,7 @@ const PublishChartButton = () => {
     <Button
       color="primary"
       variant="contained"
-      onClick={data ? goNext : undefined}
+      onClick={metadata && components ? goNext : undefined}
     >
       <Trans id="button.publish">Publish the chart</Trans>
     </Button>

diff --git a/app/components/debug-panel/DebugPanel.tsx b/app/components/debug-panel/DebugPanel.tsx
@@ -1,18 +1,21 @@
-import { AccordionProps, Box, Button, Typography } from "@mui/material";
 import {
-  Stack,
   Accordion,
   AccordionDetails,
+  AccordionProps,
   AccordionSummary,
+  Box,
+  Button,
   CircularProgress,
+  Stack,
+  Typography,
 } from "@mui/material";
-import React, { useState } from "react";
+import { useState } from "react";
 import { Inspector } from "react-inspector";
 
 import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
 import { DataSource, useConfiguratorState } from "@/configurator";
 import { dataSourceToSparqlEditorUrl } from "@/domain/datasource";
-import { useDataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
+import { useComponentsWithHierarchiesQuery } from "@/graphql/query-hooks";
 import { Icon } from "@/icons";
 import { useLocale } from "@/src";
 import useEvent from "@/utils/use-event";
@@ -40,16 +43,15 @@ const CubeMetadata = ({
 }) => {
   const locale = useLocale();
   const [expanded, setExpanded] = useState(false);
-  const [{ data: metadata, fetching }] =
-    useDataCubeMetadataWithComponentValuesQuery({
-      variables: {
-        iri: datasetIri,
-        sourceType: dataSource.type,
-        sourceUrl: dataSource.url,
-        locale: locale,
-      },
-      pause: expanded === false,
-    });
+  const [{ data, fetching }] = useComponentsWithHierarchiesQuery({
+    variables: {
+      iri: datasetIri,
+      sourceType: dataSource.type,
+      sourceUrl: dataSource.url,
+      locale: locale,
+    },
+    pause: !expanded,
+  });
   const handleChange: AccordionProps["onChange"] = useEvent((_ev, expanded) =>
     setExpanded(expanded)
   );
@@ -64,12 +66,14 @@ const CubeMetadata = ({
         <AccordionDetails>
           {fetching ? <CircularProgress size={12} color="secondary" /> : null}
 
-          {expanded && metadata ? (
+          {expanded && data?.dataCubeByIri ? (
             <Inspector
-              data={Object.fromEntries(
-                metadata?.dataCubeByIri?.dimensions.map((d) => [d.label, d]) ||
-                  []
-              )}
+              data={Object.fromEntries([
+                [
+                  ...data.dataCubeByIri.dimensions,
+                  ...data.dataCubeByIri.measures,
+                ].map((d) => [d.label, d]),
+              ])}
             />
           ) : null}
         </AccordionDetails>