Default filters for map state

CHANGELOG.md

@@ -12,6 +12,9 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 - Column order is based on the shacl:order defined in the data
   - For the dataset preview
   - For the table chart columns
+- Default state for area chart uses the hierarchy and selects
+  bottommost children
+
 
 ## [3.7.8] - 2022-08-22
 

app/charts/area/chart-area.tsx

@@ -31,7 +31,7 @@ import {
 import { isNumber } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
 import {
-  DimensionMetaDataFragment,
+  DimensionMetadataFragment,
   useDataCubeObservationsQuery,
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
@@ -102,8 +102,8 @@ export const ChartAreas = memo(
     interactiveFiltersConfig,
   }: {
     observations: Observation[];
-    dimensions: DimensionMetaDataFragment[];
-    measures: DimensionMetaDataFragment[];
+    dimensions: DimensionMetadataFragment[];
+    measures: DimensionMetadataFragment[];
     fields: AreaFields;
     interactiveFiltersConfig: InteractiveFiltersConfig;
   }) => {

app/charts/bar/chart-bar.tsx

@@ -29,7 +29,7 @@ import {
 import { isNumber } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
 import {
-  DimensionMetaDataFragment,
+  DimensionMetadataFragment,
   useDataCubeObservationsQuery,
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
@@ -100,8 +100,8 @@ export const ChartBars = memo(
     interactiveFiltersConfig,
   }: {
     observations: Observation[];
-    dimensions: DimensionMetaDataFragment[];
-    measures: DimensionMetaDataFragment[];
+    dimensions: DimensionMetadataFragment[];
+    measures: DimensionMetadataFragment[];
     fields: BarFields;
     interactiveFiltersConfig: InteractiveFiltersConfig;
   }) => {

app/charts/column/chart-column.tsx

@@ -41,7 +41,7 @@ import {
 import { isNumber } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
 import {
-  DimensionMetaDataFragment,
+  DimensionMetadataFragment,
   useDataCubeObservationsQuery,
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
@@ -112,8 +112,8 @@ export const ChartColumns = memo(
     interactiveFiltersConfig,
   }: {
     observations: Observation[];
-    dimensions: DimensionMetaDataFragment[];
-    measures: DimensionMetaDataFragment[];
+    dimensions: DimensionMetadataFragment[];
+    measures: DimensionMetadataFragment[];
     interactiveFiltersConfig: InteractiveFiltersConfig;
     fields: ColumnFields;
   }) => {

app/charts/index.ts

@@ -23,14 +23,16 @@ import {
   TableFields,
 } from "@/configurator/config-types";
 import { DEFAULT_PALETTE } from "@/configurator/configurator-state";
+import { HierarchyValue } from "@/graphql/resolver-types";
+import { visitHierarchy } from "@/rdf/tree-utils";
 
 import { mapValueIrisToColor } from "../configurator/components/ui-helpers";
 import {
   getCategoricalDimensions,
   getGeoDimensions,
   getTimeDimensions,
 } from "../domain/data";
-import { DimensionMetaDataFragment } from "../graphql/query-hooks";
+import { DimensionMetadataFragment } from "../graphql/query-hooks";
 import { DataCubeMetadata } from "../graphql/types";
 import { unreachableError } from "../lib/unreachable";
 
@@ -53,7 +55,7 @@ export const enabledChartTypes: ChartType[] = [
  */
 export const findPreferredDimension = (
   dimensions: DataCubeMetadata["dimensions"],
-  preferredType?: DimensionMetaDataFragment["__typename"]
+  preferredType?: DimensionMetadataFragment["__typename"]
 ) => {
   const dim =
     dimensions.find(
@@ -756,21 +758,44 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
     },
   },
   map: {
-    filters: ({ oldValue, newChartConfig }) => {
+    filters: ({ oldValue, newChartConfig, dimensions }) => {
       return produce(newChartConfig, (draft) => {
-        draft.filters = oldValue;
+        if (!oldValue) {
+          draft.filters = oldValue;
+        }
       });
     },
     fields: {
       areaLayer: {
         componentIri: ({ oldValue, newChartConfig, dimensions }) => {
-          const ok = dimensions.find(
+          const areaDimension = dimensions.find(
             (d) => d.__typename === "GeoShapesDimension" && d.iri === oldValue
           );
 
-          if (ok) {
+          if (areaDimension) {
             return produce(newChartConfig, (draft) => {
               draft.fields.areaLayer.componentIri = oldValue;
+
+              // Setting the filters so that bottomless areas are shown fist
+              if (areaDimension?.hierarchy) {
+                let leafs = [] as HierarchyValue[];
+                visitHierarchy(areaDimension?.hierarchy, (node) => {
+                  if (
+                    (!node.children || node.children.length === 0) &&
+                    node.hasValue
+                  ) {
+                    leafs.push(node);
+                  }
+                });
+                if (leafs.length > 0) {
+                  draft.filters[oldValue] = {
+                    type: "multi",
+                    values: Object.fromEntries(
+                      leafs.map((x) => [x.value, true])
+                    ),
+                  };
+                }
+              }
             });
           }
 
@@ -976,7 +1001,7 @@ const convertTableFieldsToSegmentField = ({
         dimensionValues: (
           dimensions.find(
             (d) => d.iri === componentIri
-          ) as DimensionMetaDataFragment
+          ) as DimensionMetadataFragment
         )?.values,
       }),
     };

app/charts/line/chart-lines.tsx

@@ -33,7 +33,7 @@ import {
 import { isNumber } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
 import {
-  DimensionMetaDataFragment,
+  DimensionMetadataFragment,
   useDataCubeObservationsQuery,
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
@@ -104,8 +104,8 @@ export const ChartLines = memo(function ChartLines({
   interactiveFiltersConfig,
 }: {
   observations: Observation[];
-  dimensions: DimensionMetaDataFragment[];
-  measures: DimensionMetaDataFragment[];
+  dimensions: DimensionMetadataFragment[];
+  measures: DimensionMetadataFragment[];
   fields: LineFields;
   interactiveFiltersConfig: InteractiveFiltersConfig;
 }) {

app/charts/map/chart-map.tsx

@@ -31,7 +31,7 @@ import {
   SymbolLayer,
 } from "@/domain/data";
 import {
-  DimensionMetaDataFragment,
+  DimensionMetadataFragment,
   useDataCubeObservationsQuery,
   useGeoCoordinatesByDimensionIriQuery,
   useGeoShapesByDimensionIriQuery,
@@ -238,8 +238,8 @@ export const ChartMap = memo(
   }: {
     features: GeoData;
     observations: Observation[];
-    measures: DimensionMetaDataFragment[];
-    dimensions: DimensionMetaDataFragment[];
+    measures: DimensionMetadataFragment[];
+    dimensions: DimensionMetadataFragment[];
     fields: MapFields;
     baseLayer: BaseLayer;
   }) => {

app/charts/map/map-state.tsx

@@ -48,7 +48,7 @@ import {
   Observation,
   ObservationValue,
 } from "@/domain/data";
-import { DimensionMetaDataFragment } from "@/graphql/query-hooks";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 
 import { getBBox } from "./helpers";
 
@@ -68,8 +68,8 @@ export interface MapState {
     measureLabel: string;
     getLabel: (d: Observation) => string;
     getValue: (d: Observation) => number | null;
-    measureDimension?: DimensionMetaDataFragment;
-    errorDimension?: DimensionMetaDataFragment;
+    measureDimension?: DimensionMetadataFragment;
+    errorDimension?: DimensionMetadataFragment;
     getFormattedError: null | ((d: Observation) => string);
     getColor: (x: number | null) => number[];
     colorScale:
@@ -90,8 +90,8 @@ export interface MapState {
     measureLabel: string;
     getLabel: (d: Observation) => string;
     getValue: (d: Observation) => number | null;
-    errorDimension?: DimensionMetaDataFragment;
-    measureDimension?: DimensionMetaDataFragment;
+    errorDimension?: DimensionMetadataFragment;
+    measureDimension?: DimensionMetadataFragment;
     getFormattedError: null | ((d: Observation) => string);
     color: string;
     radiusScale: ScalePower<number, number>;

app/charts/pie/chart-pie.tsx

@@ -27,7 +27,7 @@ import {
 } from "@/configurator";
 import { Observation } from "@/domain/data";
 import {
-  DimensionMetaDataFragment,
+  DimensionMetadataFragment,
   useDataCubeObservationsQuery,
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
@@ -101,8 +101,8 @@ export const ChartPie = memo(
     interactiveFiltersConfig,
   }: {
     observations: Observation[];
-    dimensions: DimensionMetaDataFragment[];
-    measures: DimensionMetaDataFragment[];
+    dimensions: DimensionMetadataFragment[];
+    measures: DimensionMetadataFragment[];
     fields: PieFields;
     interactiveFiltersConfig: InteractiveFiltersConfig;
   }) => {

app/charts/scatterplot/chart-scatterplot.tsx

@@ -36,7 +36,7 @@ import {
 import { isNumber } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
 import {
-  DimensionMetaDataFragment,
+  DimensionMetadataFragment,
   useDataCubeObservationsQuery,
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
@@ -111,8 +111,8 @@ export const ChartScatterplot = memo(
     interactiveFiltersConfig,
   }: {
     observations: Observation[];
-    dimensions: DimensionMetaDataFragment[];
-    measures: DimensionMetaDataFragment[];
+    dimensions: DimensionMetadataFragment[];
+    measures: DimensionMetadataFragment[];
     fields: ScatterPlotFields;
     interactiveFiltersConfig: InteractiveFiltersConfig;
   }) => {

app/charts/shared/a11y-table.tsx

@@ -4,7 +4,7 @@ import { memo, useMemo } from "react";
 import VisuallyHidden from "@/components/visually-hidden";
 import { ChartFields } from "@/configurator";
 import { Observation } from "@/domain/data";
-import { DimensionMetaDataFragment } from "@/graphql/query-hooks";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 
 export const A11yTable = memo(
   ({
@@ -15,8 +15,8 @@ export const A11yTable = memo(
     observations,
   }: {
     title: string;
-    dimensions: DimensionMetaDataFragment[];
-    measures: DimensionMetaDataFragment[];
+    dimensions: DimensionMetadataFragment[];
+    measures: DimensionMetadataFragment[];
     fields: ChartFields;
     observations: Observation[];
   }) => {

app/charts/shared/chart-helpers.tsx

@@ -20,7 +20,7 @@ import {
 } from "@/configurator/config-types";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import { Observation } from "@/domain/data";
-import { DimensionMetaDataFragment } from "@/graphql/query-hooks";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import truthy from "@/utils/truthy";
 
 export type QueryFilters = Filters | FilterValueSingle;
@@ -286,7 +286,7 @@ const SlugRe = /\W+/g;
 export const getSlugifiedIri = (iri: string) => iri.replace(SlugRe, "_");
 
 export const getLabelWithUnit = (
-  dimension: DimensionMetaDataFragment
+  dimension: DimensionMetadataFragment
 ): string => {
   return dimension.unit
     ? `${dimension.label} (${dimension.unit})`

app/charts/shared/use-chart-state.tsx

@@ -13,15 +13,15 @@ import { ScatterplotState } from "@/charts/scatterplot/scatterplot-state";
 import { TableChartState } from "@/charts/table/table-state";
 import { ChartFields, InteractiveFiltersConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
-import { DimensionMetaDataFragment } from "@/graphql/query-hooks";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { Has } from "@/lib/has";
 
 export interface ChartProps {
   data: Observation[];
   fields: ChartFields;
   interactiveFiltersConfig: InteractiveFiltersConfig;
-  dimensions: DimensionMetaDataFragment[];
-  measures: DimensionMetaDataFragment[];
+  dimensions: DimensionMetadataFragment[];
+  measures: DimensionMetadataFragment[];
 }
 
 export type ChartState =

app/charts/table/chart-table.tsx

@@ -13,7 +13,7 @@ import { DataSource, TableConfig } from "@/configurator";
 import { isNumber } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
 import {
-  DimensionMetaDataFragment,
+  DimensionMetadataFragment,
   useDataCubeObservationsQuery,
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
@@ -72,8 +72,8 @@ const ChartTable = memo(function ChartTable({
   chartConfig,
 }: {
   observations: Observation[];
-  dimensions: DimensionMetaDataFragment[];
-  measures: DimensionMetaDataFragment[];
+  dimensions: DimensionMetadataFragment[];
+  measures: DimensionMetadataFragment[];
   chartConfig: TableConfig;
 }) {
   return (

app/charts/table/table-state.tsx

@@ -32,7 +32,7 @@ import {
   useOrderedTableColumns,
 } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
-import { DimensionMetaDataFragment } from "@/graphql/query-hooks";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { estimateTextWidth } from "@/lib/estimate-text-width";
 import { useTheme } from "@/themes";
 
@@ -250,7 +250,7 @@ const useTableState = ({
           const { colorMapping } = columnStyle as ColumnStyleCategory;
           const dimension = dimensions.find(
             (d) => d.iri === iri
-          ) as DimensionMetaDataFragment;
+          ) as DimensionMetadataFragment;
 
           // Color scale (always from colorMappings)
           const colorScale = scaleOrdinal();

app/components/data-download.tsx

@@ -35,7 +35,7 @@ import {
   DataCubeObservationsDocument,
   DataCubeObservationsQuery,
   DataCubeObservationsQueryVariables,
-  DimensionMetaDataFragment,
+  DimensionMetadataFragment,
 } from "../graphql/query-hooks";
 import { Icon } from "../icons";
 
@@ -81,16 +81,16 @@ export const DataDownloadStateProvider = ({
 const FILE_FORMATS = ["csv", "xlsx"] as const;
 export type FileFormat = typeof FILE_FORMATS[number];
 
-const makeColumnLabel = (dim: DimensionMetaDataFragment) => {
+const makeColumnLabel = (dim: DimensionMetadataFragment) => {
   return `${dim.label}${dim.unit ? ` (${dim.unit})` : ""}`;
 };
 const prepareData = ({
   dimensions,
   measures,
   observations,
 }: {
-  dimensions: DimensionMetaDataFragment[];
-  measures: DimensionMetaDataFragment[];
+  dimensions: DimensionMetadataFragment[];
+  measures: DimensionMetadataFragment[];
   observations: Observation[];
 }) => {
   const columns = keyBy([...dimensions, ...measures], (d) => d.iri);