Merge branch 'main' of github.com:visualize-admin/visualization-tool into feat/show-values-improvements

Author: bprusinowski

.storybook/main.ts

@@ -1,5 +1,19 @@
 import type { StorybookConfig } from "@storybook/nextjs";
 import { dirname, join, resolve } from "path";
+import { config as dotEnvConfig } from "dotenv";
+import { existsSync } from "fs";
+
+const dotEnvFilePaths = [
+  join(__dirname, "../app/.env.local"),
+  join(__dirname, "../app/.env.development"),
+];
+for (let file of dotEnvFilePaths) {
+  if (existsSync(file)) {
+    dotEnvConfig({
+      path: file,
+    });
+  }
+}
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -11,6 +25,10 @@ function getAbsolutePath(value: string): any {
 const config: StorybookConfig = {
   stories: ["../app/**/*.docs.mdx", "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
 
+  // react-docgen-typescript is slow and we do not use docgen so we disable
+  // docgen at the moment
+  typescript: { reactDocgen: false },
+
   addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
@@ -21,6 +39,18 @@ const config: StorybookConfig = {
     options: {},
   },
   docs: {},
+  env: (config) => {
+    const keys = Object.keys(process.env).filter((key) => {
+      return key.startsWith("NEXT_PUBLIC_");
+    });
+    const forwardedEnv = Object.fromEntries(
+      keys.map((k) => [k, process.env[k] ?? ""] as const)
+    );
+    return {
+      ...config,
+      ...forwardedEnv,
+    };
+  },
   webpackFinal: async (config) => {
     if (!config.resolve) {
       config.resolve = {};

CHANGELOG.md

@@ -19,10 +19,14 @@ You can also check the
     others too – and we fall back to a regular string in case the label is not
     localized
   - Value labels in segmented bar charts are now centered horizontally
+  - It's now possible to enter www links in text blocks link elements, instead
+    of having to always use https://
 - Fixes
   - Color palette can be changed again
   - Combo charts tooltips now work correctly again
   - Interactive 100% mode switch doesn't overlap with Y axis label anymore
+  - Chart preview using hash parameters now correctly deals with spacial
+    characters
 
 # [5.7.0] - 2025-04-16
 

app/charts/map/map-custom-layers-legend.tsx

@@ -1,11 +1,13 @@
 import { Box, Typography } from "@mui/material";
+import uniq from "lodash/uniq";
 import NextImage from "next/image";
 
-import { ParsedWMSLayer, useWMSLayers } from "@/charts/map/wms-utils";
+import { useWMTSorWMSLayers } from "@/charts/map/wms-endpoint-utils";
+import { DEFAULT_WMS_URL, ParsedWMSLayer } from "@/charts/map/wms-utils";
 import {
+  DEFAULT_WMTS_URL,
   getWMTSLayerValue,
   ParsedWMTSLayer,
-  useWMTSLayers,
 } from "@/charts/map/wmts-utils";
 import { Error, InlineLoading } from "@/components/hint";
 import { InfoIconTooltip } from "@/components/info-icon-tooltip";
@@ -86,8 +88,25 @@ const useLegendsData = ({
   customLayers: BaseLayer["customLayers"];
 }) => {
   const locale = useLocale();
-  const { data: wmsLayers, error: wmsError } = useWMSLayers();
-  const { data: wmtsLayers, error: wmtsError } = useWMTSLayers();
+  const wmsLayerConfigs = customLayers.filter((layer) => layer.type === "wms");
+  const wmtsLayerConfigs = customLayers.filter(
+    (layer) => layer.type === "wmts"
+  );
+
+  const wmtsEndpoints = uniq(
+    wmtsLayerConfigs.map((x) => x.endpoint ?? DEFAULT_WMTS_URL)
+  );
+  const wmsEndpoints = uniq(
+    wmsLayerConfigs.map((x) => x.endpoint ?? DEFAULT_WMS_URL)
+  );
+  const { data: groupedLayers, error: customLayersError } = useWMTSorWMSLayers([
+    ...wmtsEndpoints,
+    ...wmsEndpoints,
+  ]);
+  const { wms: wmsLayers, wmts: wmtsLayers } = groupedLayers ?? {
+    wms: [],
+    wmts: [],
+  };
   const { data: legendsData, error: legendsError } = useFetchData({
     queryKey: [
       "custom-layers-legends",
@@ -140,6 +159,6 @@ const useLegendsData = ({
 
   return {
     data: legendsData,
-    error: wmsError ?? wmtsError ?? legendsError,
+    error: customLayersError ?? legendsError,
   };
 };

app/charts/map/map.tsx

@@ -10,6 +10,7 @@ import { hexToRgba } from "@uiw/react-color";
 import { geoArea } from "d3-geo";
 import debounce from "lodash/debounce";
 import orderBy from "lodash/orderBy";
+import uniq from "lodash/uniq";
 import maplibreglRaw from "maplibre-gl";
 import { useEffect, useMemo, useRef, useState } from "react";
 import Map, { LngLatLike, MapboxEvent } from "react-map-gl";
@@ -29,8 +30,9 @@ import {
 import { MapState } from "@/charts/map/map-state";
 import { HoverObjectType, useMapTooltip } from "@/charts/map/map-tooltip";
 import { getMap, setMap } from "@/charts/map/ref";
-import { getWMSTile, useWMSLayers } from "@/charts/map/wms-utils";
-import { getWMTSTile, useWMTSLayers } from "@/charts/map/wmts-utils";
+import { useWMTSorWMSLayers } from "@/charts/map/wms-endpoint-utils";
+import { DEFAULT_WMS_URL, getWMSTile } from "@/charts/map/wms-utils";
+import { DEFAULT_WMTS_URL, getWMTSTile } from "@/charts/map/wmts-utils";
 import { useChartState } from "@/charts/shared/chart-state";
 import { useInteraction } from "@/charts/shared/use-interaction";
 import { useLimits } from "@/config-utils";
@@ -117,12 +119,20 @@ export const MapComponent = ({
     };
   }, [customLayers]);
 
-  const { data: wmsLayers } = useWMSLayers({
-    pause: wmsCustomLayers.length === 0,
-  });
-  const { data: wmtsLayers } = useWMTSLayers({
-    pause: wmtsCustomLayers.length === 0,
-  });
+  const wmsEndpoints = uniq(
+    wmsCustomLayers.map((x) => x.endpoint ?? DEFAULT_WMS_URL)
+  );
+  const wmtsEndpoints = uniq(
+    wmtsCustomLayers.map((x) => x.endpoint ?? DEFAULT_WMTS_URL)
+  );
+  const { data: groupedLayers } = useWMTSorWMSLayers([
+    ...wmsEndpoints,
+    ...wmtsEndpoints,
+  ]);
+  const { wms: wmsLayers, wmts: wmtsLayers } = groupedLayers ?? {
+    wms: [],
+    wmts: [],
+  };
   const { behindAreaCustomLayers, afterAreaCustomLayers } = useMemo(() => {
     return {
       behindAreaCustomLayers: customLayers

app/charts/map/mocks/README.md

@@ -0,0 +1,19 @@
+1. Get bio-discomap.xml
+
+```
+curl
+'https://bio.discomap.eea.europa.eu/arcgis/services/Ecosystem/Ecosystems/MapServer/WMSServer?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.3.0&FORMAT=text%2Fxml&lang=en'
+--compressed -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15;
+rv:137.0) Gecko/20100101 Firefox/137.0' -H 'Accept: application/json,
+text/plain, _/_' -H 'Accept-Language: en-US,en;q=0.5' -H 'Accept-Encoding: gzip,
+deflate, br, zstd' -H 'Origin: https://map.geo.admin.ch' -H 'Connection:
+keep-alive' -H 'Referer: https://map.geo.admin.ch/' -H 'Sec-Fetch-Dest: empty'
+-H 'Sec-Fetch-Mode: cors' -H 'Sec-Fetch-Site: cross-site' -H 'Priority: u=0' -H
+'Pragma: no-cache' -H 'Cache-Control: no-cache'
+```
+
+2. Get geo-admin.wmts.xml
+
+```
+curl 'https://wmts.geo.admin.ch/EPSG/3857/1.0.0/WMTSCapabilities.xml?SERVICE=WMTS&REQUEST=GetCapabilities&lang=en' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0' -H 'Accept: application/json, text/plain, */*' -H 'Accept-Language: en-US,en;q=0.5' -H 'Accept-Encoding: gzip, deflate, br, zstd' -H 'Origin: https://map.geo.admin.ch' -H 'Connection: keep-alive' -H 'Referer: https://map.geo.admin.ch/' -H 'Sec-Fetch-Dest: empty' -H 'Sec-Fetch-Mode: cors' -H 'Sec-Fetch-Site: same-site' -H 'Priority: u=0' -H 'Pragma: no-cache' -H 'Cache-Control: no-cache' -H 'TE: trailers'
+```