Merge branch 'main' of github.com:visualize-admin/visualization-tool into explore/table-interactive-filters

Author: bprusinowski

.eslintrc.json

@@ -2,6 +2,7 @@
   "extends": "next",
   "plugins": ["import", "visualize-admin", "deprecate", "unused-imports"],
   "rules": {
+    "no-duplicate-case": "error",
     "no-restricted-imports": [
       "error",
       {

.storybook/decorators.tsx

@@ -3,14 +3,14 @@ import { CssBaseline, ThemeProvider } from "@mui/material";
 import { NextPage } from "next";
 import { SessionProvider } from "next-auth/react";
 import Router from "next/router";
-import * as React from "react";
 import { Decorator } from "@storybook/react";
 import { Client, Provider } from "urql";
 
 import { i18n } from "../app/locales/locales";
 import { theme } from "../app/themes/theme";
-import AsyncLocalizationProvider from "../app/utils/l10n-provider";
+import { AsyncLocalizationProvider } from "../app/utils/async-localization-provider";
 import { SnackbarProvider } from "../app/components/snackbar";
+import { useEffect, useState } from "react";
 
 export const AppContextDecorator = (Story: NextPage) => (
   <SessionProvider refetchOnWindowFocus={false} refetchWhenOffline={false}>
@@ -28,8 +28,8 @@ export const AppContextDecorator = (Story: NextPage) => (
 );
 
 export const RouterDecorator = (Story: NextPage) => {
-  const [_, setIsRouterReady] = React.useState(false);
-  React.useEffect(() => {
+  const [_, setIsRouterReady] = useState(false);
+  useEffect(() => {
     Router.ready(() => {
       setIsRouterReady(true);
     });

CHANGELOG.md

@@ -11,11 +11,42 @@ You can also check the
 
 # Unreleased
 
+- Features
+  - Improved UX of interacting with conversion units multiplier input
+  - Updated WMS & WMTS providers list
+- Fixes
+  - Interactive calculation is now correctly reset when removing segmentation
+  - Tooltips are now correctly displayed in data preview table
+  - Grid lines do not overlap the chart elements anymore in case of negative
+    values
+  - Color squares in color palette picker are now correctly reset when changing
+    the palette
+  - Use most recent value toggle is now correctly displaying in the single
+    filters section
+- Security
+  - Added additional protection against data source URL injection
+  - Removed feature flag for custom GraphQL endpoint
+
+# 5.8.3 - 2025-06-10
+
+- Fixes
+  - Segmented bar and column charts now correctly display value labels when
+    downloading an image
+  - Ticks of X and Y axes in bar and column charts are now correctly formatted
+
+# 5.8.2 - 2025-06-03
+
 - Features
   - Invalid URL error message is now translated
   - Improved UX of interacting with conversion units multiplier input
+  - Added additional WMS & WMTS providers
 - Fixes
   - Fixed an infinite render loop when adding a custom map layer
+- Styles
+  - Fixed some smaller UI inconsistencies, mostly in table charts
+- Maintenance
+  - Consolidated file names, to use kebab-case everywhere
+  - Simplified exports and imports, to prefer named exports over default exports
 
 # 5.8.1 - 2025-05-27
 

CODEOWNERS

@@ -1 +1 @@
-*    @bprusinowski @noahonyejese
+*    @bprusinowski

app/auth-providers/adfs.ts

@@ -1,6 +1,6 @@
 import { OAuthConfig, OAuthUserConfig } from "next-auth/providers";
 
-interface ADFSProfile extends Record<string, any> {
+type ADFSProfile = Record<string, any> & {
   /**
    * The subject of the JWT (user)
    */
@@ -20,19 +20,19 @@ interface ADFSProfile extends Record<string, any> {
    * The assigned role(s) of the user.
    */
   role: string | string[];
-}
+};
 
 /**
  * Configures Active Directory Federation Services as a NextAuth provider.
  */
-export default function ADFS<P extends ADFSProfile>(
+export const ADFS = <P extends ADFSProfile>(
   options: OAuthUserConfig<P> & {
     /**
      * The OAuth Authorize URL
      */
     authorizeUrl: string;
   }
-): OAuthConfig<P> {
+): OAuthConfig<P> => {
   return {
     id: "adfs",
     name: "eIAM (ADFS)",
@@ -43,9 +43,7 @@ export default function ADFS<P extends ADFSProfile>(
         scope: "openid",
       },
     },
-
     idToken: true,
-
     async profile(profile: P, tokens) {
       // Usually the user only has one role, which is a string.
       let role = profile.role;
@@ -72,7 +70,6 @@ export default function ADFS<P extends ADFSProfile>(
         idToken: tokens.id_token,
       };
     },
-
     options,
   };
-}
+};

app/browse/component-label.tsx

@@ -20,7 +20,9 @@ export const ComponentLabel = ({
     </OpenMetadataPanelWrapper>
   ) : component.description ? (
     <MaybeTooltip title={component.description} tooltipProps={tooltipProps}>
-      <ComponentLabelInner component={component} />
+      <div>
+        <ComponentLabelInner component={component} />
+      </div>
     </MaybeTooltip>
   ) : (
     <ComponentLabelInner component={component} />

app/browse/data-table-preview.tsx

@@ -13,7 +13,7 @@ import { ComponentLabel } from "@/browse/component-label";
 import { Component, isNumericalMeasure, Observation } from "@/domain/data";
 import { useDimensionFormatters } from "@/formatters";
 import SvgIcChevronDown from "@/icons/components/IcChevronDown";
-import { uniqueMapBy } from "@/utils/uniqueMapBy";
+import { uniqueMapBy } from "@/utils/unique-map-by";
 
 export const DataTablePreview = ({
   title,

app/browser/context.tsx

@@ -6,24 +6,26 @@ import pickBy from "lodash/pickBy";
 import { Url } from "next/dist/shared/lib/router/router";
 import Link from "next/link";
 import { Router, useRouter } from "next/router";
-import React, {
+import {
+  ComponentProps,
   createContext,
+  ReactNode,
   useContext,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
 
-import { SearchCubeResultOrder } from "@/graphql/query-hooks";
-import { BrowseParams } from "@/pages/browse";
-import useEvent from "@/utils/use-event";
-
 import {
   BrowseFilter,
   getFiltersFromParams,
   getParamsFromFilters,
-} from "./filters";
+} from "@/browser/filters";
+import { truthy } from "@/domain/types";
+import { SearchCubeResultOrder } from "@/graphql/query-hooks";
+import { BrowseParams } from "@/pages/browse";
+import { useEvent } from "@/utils/use-event";
 
 export const getBrowseParamsFromQuery = (
   query: Router["query"]
@@ -75,10 +77,15 @@ export const getBrowseParamsFromQuery = (
   );
 };
 
-export const buildURLFromBrowseState = (browseState: BrowseParams) => {
-  const { type, iri, subtype, subiri, subsubtype, subsubiri, ...queryParams } =
-    browseState;
-
+export const buildURLFromBrowseState = ({
+  type,
+  iri,
+  subtype,
+  subiri,
+  subsubtype,
+  subsubiri,
+  ...queryParams
+}: BrowseParams) => {
   const typePart =
     type && iri
       ? `${encodeURIComponent(type)}/${encodeURIComponent(iri)}`
@@ -91,15 +98,16 @@ export const buildURLFromBrowseState = (browseState: BrowseParams) => {
     subsubtype && subsubiri
       ? `${encodeURIComponent(subsubtype)}/${encodeURIComponent(subsubiri)}`
       : undefined;
-
   const pathname = ["/browse", typePart, subtypePart, subsubtypePart]
-    .filter(Boolean)
+    .filter(truthy)
     .join("/");
+
   return {
     pathname,
     query: queryParams,
-  } as React.ComponentProps<typeof Link>["href"];
+  } satisfies ComponentProps<typeof Link>["href"];
 };
+
 const extractParamFromPath = (path: string, param: string) =>
   path.match(new RegExp(`[&?]${param}=(.*?)(&|$)`));
 
@@ -140,22 +148,22 @@ const useBrowseParamsStateWithUrlSync = (initialState: BrowseParams) => {
   }, [router.isReady, router.query]);
 
   const setState = useEvent(
-    (
-      stateUpdate: BrowseParams | ((prevState: BrowseParams) => BrowseParams)
-    ) => {
-      rawSetState((curState) => {
+    (stateUpdate: BrowseParams | ((prev: BrowseParams) => BrowseParams)) => {
+      rawSetState((prev) => {
         const newState = {
           ...(stateUpdate instanceof Function
-            ? stateUpdate(curState)
+            ? stateUpdate(prev)
             : stateUpdate),
-        } as BrowseParams;
+        } satisfies BrowseParams;
         router.replace(urlCodec.serialize(newState), undefined, {
           shallow: true,
         });
+
         return newState;
       });
     }
   );
+
   return [state, setState] as const;
 };
 
@@ -283,7 +291,7 @@ export const BrowseStateProvider = ({
   children,
   syncWithUrl,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   syncWithUrl: boolean;
 }) => {
   const browseState = useBrowseState({ syncWithUrl });

app/browser/dataset-browse.spec.tsx

@@ -8,7 +8,7 @@ describe("getFiltersFromParams", () => {
     const params = {
       type: "organization",
       iri: "https://fake-iri-organization",
-    } as BrowseParams;
+    } satisfies BrowseParams;
     const filters = getFiltersFromParams(params);
     expect(filters).toEqual([
       {
@@ -24,7 +24,7 @@ describe("getFiltersFromParams", () => {
       iri: "https://fake-iri-theme",
       subtype: "organization",
       subiri: "https://fake-iri-organization",
-    } as BrowseParams;
+    } satisfies BrowseParams;
     const filters = getFiltersFromParams(params);
     expect(filters).toEqual([
       { iri: "https://fake-iri-theme", __typename: "DataCubeTheme" },
@@ -41,7 +41,7 @@ describe("getFiltersFromParams", () => {
       iri: "https://fake-iri-organization",
       subtype: "theme",
       subiri: "https://fake-iri-theme",
-    } as BrowseParams;
+    } satisfies BrowseParams;
     const filters = getFiltersFromParams(params);
     expect(filters).toEqual([
       {
@@ -59,7 +59,7 @@ describe("getFiltersFromParams", () => {
     const params = {
       type: "dataset",
       iri: "https://fake-iri-dataset",
-    } as BrowseParams;
+    } satisfies BrowseParams;
     const filters = getFiltersFromParams(params);
     expect(filters).toEqual([]);
   });