feat: Interactive multi filters

CLAUDE.md

@@ -0,0 +1,139 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with
+code in this repository.
+
+## Common Development Commands
+
+### Setup & Development
+
+- `yarn setup:dev` - Complete development environment setup (installs deps,
+  compiles locales, runs DB migrations)
+- `yarn dev` - Start development server (with debugging enabled)
+- `yarn dev:ssl` - Start development server with HTTPS (required for
+  authentication flows)
+- `yarn dev:rollup` - Build embed script during development (when changing
+  embed/index.ts)
+
+### Building & Testing
+
+- `yarn build` - Full production build (includes GraphQL codegen, locale
+  compilation, rollup, storybook, JSON schema generation, and Next.js build)
+- `yarn typecheck` - Run TypeScript type checking for both app and embed
+- `yarn lint` - Run ESLint on the app directory
+- `yarn test` - Run unit tests with Vitest
+- `yarn test <file-pattern>` - Run specific test files (e.g.,
+  `yarn test interactive-filters-config-state.spec.tsx`)
+- `yarn test:watch` - Run unit tests in watch mode
+
+### End-to-End Testing
+
+- `yarn e2e:dev` - Run Playwright tests against local development server
+- `yarn e2e:ui` - Run Playwright tests with interactive UI
+- `yarn e2e:dev:ssl` - Run Playwright tests against HTTPS development server
+
+### Database & Migrations
+
+- `yarn db:migrate:dev` - Run database migrations for development (manual in
+  dev, automatic in production)
+- `yarn db:migrate` - Run database migrations (production)
+
+### Localization
+
+- `yarn locales:extract` - Extract translatable strings from code to generate
+  message files
+- `yarn locales:compile` - Compile translation files
+- `yarn locales:sync` - Sync translations with Accent (translation service)
+
+### GraphQL & Code Generation
+
+- `yarn graphql:codegen` - Generate TypeScript types from GraphQL schema
+- `yarn graphql:codegen:dev` - Watch mode for GraphQL code generation
+
+## Architecture Overview
+
+This is a Next.js-based data visualization platform that allows users to create
+interactive charts from RDF/SPARQL data sources.
+
+### Key Technologies
+
+- **Next.js 14** - React framework with SSR/SSG
+- **TypeScript** - Type-safe development
+- **GraphQL** - API layer with Apollo Server
+- **URQL** - GraphQL client
+- **Prisma** - Database ORM with PostgreSQL
+- **D3.js** - Data visualization library
+- **Material-UI (MUI)** - UI component library
+- **Vitest** - Unit testing framework
+- **Playwright** - End-to-end testing
+
+### Core Directory Structure
+
+- `/app` - Main application code (Next.js app directory)
+  - `/charts` - Chart rendering components (area, bar, line, map, pie,
+    scatterplot, table)
+  - `/configurator` - Chart configuration UI and state management
+  - `/components` - Reusable UI components
+  - `/pages` - Next.js pages and API routes
+  - `/rdf` - RDF/SPARQL data fetching and parsing logic
+  - `/graphql` - GraphQL schema, resolvers, and client setup
+  - `/locales` - Internationalization files (en, de, fr, it)
+  - `/prisma` - Database schema and migrations
+- `/embed` - Embeddable chart widget
+- `/e2e` - Playwright end-to-end tests
+- `/k6` - Performance and load tests
+
+### Data Flow
+
+1. **Data Sources**: RDF/SPARQL endpoints provide cube data
+2. **GraphQL Layer**: Resolvers query RDF data and transform it
+3. **Chart Configurator**: UI for selecting datasets and configuring
+   visualizations
+4. **Chart Rendering**: D3.js-based components render interactive charts
+5. **Persistence**: Chart configurations stored in PostgreSQL via Prisma
+
+### Chart Types Supported
+
+- Area charts (single and stacked)
+- Bar charts (grouped and stacked, horizontal and vertical)
+- Line charts (single and multiple)
+- Combo charts (line+column, dual-axis, multi-line)
+- Maps (with symbols and areas)
+- Pie charts
+- Scatterplots
+- Tables
+
+### State Management
+
+- Chart configuration state managed through React context and reducers
+- Interactive filters synchronized across charts
+- Local storage for persistence of user preferences
+
+### Authentication
+
+- Next-auth with ADFS provider for Swiss federal authentication
+- Test credentials provider for development/preview environments
+- User-specific chart configurations and custom color palettes
+
+### Development Notes
+
+- Docker Compose setup for PostgreSQL database
+- Comprehensive visual regression testing with screenshot comparison
+- Internationalization support for 4 languages
+- Embed functionality for including charts in external websites
+- Performance monitoring with k6 and Grafana integration
+- Storybook for component documentation and testing
+
+### Testing Strategy
+
+- Unit tests with Vitest and React Testing Library
+- E2E tests with Playwright for critical user flows
+- Visual regression tests for chart rendering
+- Performance tests for GraphQL queries and data loading
+- Load testing for API endpoints
+
+### Deployment
+
+- Designed for Vercel and Docker deployments
+- Database migrations run automatically on production builds
+- Environment-specific configuration through environment variables

app/browser/dataset-browse.tsx

@@ -313,7 +313,7 @@ export const SearchDatasetSortControl = ({
         }}
         value={value}
         options={options}
-        sortOptions={false}
+        sort={false}
         sx={{ width: "fit-content" }}
       />
     </Box>
@@ -898,7 +898,7 @@ export const DatasetResults = ({
         variant="h2"
         sx={{ color: "grey.600", mt: 8, textAlign: "center" }}
       >
-        <Trans id="No results" />
+        <Trans id="No results">No results</Trans>
       </Typography>
     );
   }

app/charts/area/areas-state.tsx

@@ -336,7 +336,7 @@ const useAreasState = (
     //  When the user can toggle between absolute and relative values, we use the
     // absolute values to calculate the yScale domain, so that the yScale doesn't
     // change when the user toggles between absolute and relative values.
-    if (interactiveFiltersConfig?.calculation.active) {
+    if (interactiveFiltersConfig.calculation.active) {
       const scale = getStackedYScale(paddingData, {
         normalize: false,
         getX: getXAsString,
@@ -362,7 +362,7 @@ const useAreasState = (
       customDomain: y.customDomain,
     });
   }, [
-    interactiveFiltersConfig?.calculation.active,
+    interactiveFiltersConfig.calculation.active,
     paddingData,
     normalize,
     getXAsString,

app/charts/area/chart-area.tsx

@@ -57,7 +57,7 @@ const ChartAreas = memo((props: ChartProps<AreaConfig>) => {
           ) : (
             <InteractionHorizontal />
           )}
-          {interactiveFiltersConfig?.timeRange.active === true && <BrushTime />}
+          {interactiveFiltersConfig.timeRange.active && <BrushTime />}
         </ChartSvg>
         {isEditingAnnotation ? (
           <HoverAnnotationDot />
@@ -72,7 +72,7 @@ const ChartAreas = memo((props: ChartProps<AreaConfig>) => {
           <LegendColor
             chartConfig={chartConfig}
             symbol="square"
-            interactive={interactiveFiltersConfig?.legend.active}
+            interactive={interactiveFiltersConfig.legend.active}
             showTitle={fields.segment?.showTitle}
             dimensionsById={dimensionsById}
             limits={limits}

app/charts/bar/bars-stacked-state.tsx

@@ -362,7 +362,7 @@ const useBarsStackedState = (
     //  When the user can toggle between absolute and relative values, we use the
     // absolute values to calculate the xScale domain, so that the xScale doesn't
     // change when the user toggles between absolute and relative values.
-    if (interactiveFiltersConfig?.calculation.active) {
+    if (interactiveFiltersConfig.calculation.active) {
       const scale = getStackedXScale(paddingData, {
         normalize: false,
         getX,
@@ -386,7 +386,7 @@ const useBarsStackedState = (
       customDomain: x.customDomain,
     });
   }, [
-    interactiveFiltersConfig?.calculation.active,
+    interactiveFiltersConfig.calculation.active,
     paddingData,
     normalize,
     getX,

app/charts/bar/chart-bar.tsx

@@ -104,7 +104,7 @@ const ChartBars = memo((props: ChartProps<BarConfig>) => {
               dimensionsById={dimensionsById}
               chartConfig={chartConfig}
               symbol="square"
-              interactive={interactiveFiltersConfig?.legend.active}
+              interactive={interactiveFiltersConfig.legend.active}
               showTitle={fields.segment.showTitle}
             />
           </ChartControlsContainer>
@@ -136,7 +136,7 @@ const ChartBars = memo((props: ChartProps<BarConfig>) => {
               dimensionsById={dimensionsById}
               chartConfig={chartConfig}
               symbol="square"
-              interactive={interactiveFiltersConfig?.legend.active}
+              interactive={interactiveFiltersConfig.legend.active}
               showTitle={fields.segment.showTitle}
             />
           </ChartControlsContainer>

app/charts/chart-config-ui-options.ts

@@ -1,4 +1,5 @@
-import { t } from "@lingui/macro";
+import { i18n } from "@lingui/core";
+import { defineMessage, t } from "@lingui/macro";
 import { extent, group } from "d3-array";
 import { scaleLinear } from "d3-scale";
 import { schemeCategory10 } from "d3-scale-chromatic";
@@ -478,15 +479,18 @@ export const ANIMATION_FIELD_SPEC: EncodingSpec<
     if (temporalDimensions.length === temporalFieldComponentIds.length) {
       return {
         disabled: true,
-        warnMessage: t({
-          id: "controls.section.animation.no-available-temporal-dimensions",
-          message: `There are no available temporal dimensions to use. Change some of the following encodings: {fields} to enable animation.`,
-          values: {
+        warnMessage: i18n._(
+          defineMessage({
+            id: "controls.section.animation.no-available-temporal-dimensions",
+            message:
+              "There are no available temporal dimensions to use. Change some of the following encodings: {fields} to enable animation.",
+          }) as unknown as string,
+          {
             fields: temporalFieldComponentIds
               .map((d) => getFieldLabel(fieldComponentsMap[d.id]))
               .join(", "),
-          },
-        }),
+          }
+        ),
       };
     }
 
@@ -655,7 +659,7 @@ const chartConfigOptionsUISpec: ChartSpecs = {
               if (segment) {
                 const yScale = getStackedYScale(observations, {
                   normalize:
-                    chartConfig.interactiveFiltersConfig?.calculation.type ===
+                    chartConfig.interactiveFiltersConfig.calculation.type ===
                     "percent",
                   getX,
                   getY,
@@ -758,7 +762,7 @@ const chartConfigOptionsUISpec: ChartSpecs = {
             if (disableStacked(yMeasure)) {
               setWith(chartConfig, "fields.segment.type", "grouped", Object);
 
-              if (chartConfig.interactiveFiltersConfig?.calculation) {
+              if (chartConfig.interactiveFiltersConfig.calculation) {
                 setWith(
                   chartConfig,
                   "interactiveFiltersConfig.calculation",
@@ -799,7 +803,7 @@ const chartConfigOptionsUISpec: ChartSpecs = {
               if (segment && segment.type === "stacked") {
                 const yScale = getStackedYScale(observations, {
                   normalize:
-                    chartConfig.interactiveFiltersConfig?.calculation.type ===
+                    chartConfig.interactiveFiltersConfig.calculation.type ===
                     "percent",
                   getX,
                   getY,
@@ -959,7 +963,7 @@ const chartConfigOptionsUISpec: ChartSpecs = {
             if (disableStacked(xMeasure)) {
               setWith(chartConfig, "fields.segment.type", "grouped", Object);
 
-              if (chartConfig.interactiveFiltersConfig?.calculation) {
+              if (chartConfig.interactiveFiltersConfig.calculation) {
                 setWith(
                   chartConfig,
                   "interactiveFiltersConfig.calculation",
@@ -1000,7 +1004,7 @@ const chartConfigOptionsUISpec: ChartSpecs = {
               if (segment && segment.type === "stacked") {
                 const xScale = getStackedXScale(observations, {
                   normalize:
-                    chartConfig.interactiveFiltersConfig?.calculation.type ===
+                    chartConfig.interactiveFiltersConfig.calculation.type ===
                     "percent",
                   getX,
                   getY,

app/charts/column/chart-column.tsx

@@ -104,7 +104,7 @@ const ChartColumns = memo((props: ChartProps<ColumnConfig>) => {
               dimensionsById={dimensionsById}
               chartConfig={chartConfig}
               symbol="square"
-              interactive={interactiveFiltersConfig?.legend.active}
+              interactive={interactiveFiltersConfig.legend.active}
               showTitle={fields.segment.showTitle}
             />
           </ChartControlsContainer>
@@ -136,7 +136,7 @@ const ChartColumns = memo((props: ChartProps<ColumnConfig>) => {
               dimensionsById={dimensionsById}
               chartConfig={chartConfig}
               symbol="square"
-              interactive={interactiveFiltersConfig?.legend.active}
+              interactive={interactiveFiltersConfig.legend.active}
               showTitle={fields.segment.showTitle}
             />
           </ChartControlsContainer>

app/charts/column/columns-stacked-state.tsx

@@ -360,7 +360,7 @@ const useColumnsStackedState = (
     //  When the user can toggle between absolute and relative values, we use the
     // absolute values to calculate the yScale domain, so that the yScale doesn't
     // change when the user toggles between absolute and relative values.
-    if (interactiveFiltersConfig?.calculation.active) {
+    if (interactiveFiltersConfig.calculation.active) {
       const scale = getStackedYScale(paddingData, {
         normalize: false,
         getX,
@@ -384,7 +384,7 @@ const useColumnsStackedState = (
       customDomain: y.customDomain,
     });
   }, [
-    interactiveFiltersConfig?.calculation.active,
+    interactiveFiltersConfig.calculation.active,
     paddingData,
     normalize,
     getX,

app/charts/index.spec.ts

@@ -314,6 +314,8 @@ describe("chart type switch", () => {
           componentIds: [
             "https://environment.ld.admin.ch/foen/ubd0104/dateofprobing",
           ],
+          defaultValueOverrides: {},
+          filterTypes: {},
         },
         calculation: {
           active: false,
@@ -330,12 +332,12 @@ describe("chart type switch", () => {
       measures: bathingWaterData.data.dataCubeByIri.measures as Measure[],
     });
 
-    expect(newConfig.interactiveFiltersConfig?.dataFilters.active).toEqual(
+    expect(newConfig.interactiveFiltersConfig.dataFilters.active).toEqual(
       false
     );
-    expect(
-      newConfig.interactiveFiltersConfig?.dataFilters.componentIds
-    ).toEqual([]);
+    expect(newConfig.interactiveFiltersConfig.dataFilters.componentIds).toEqual(
+      []
+    );
   });
 
   it("should not carry over not-allowed segment", () => {