Merge branch 'refactor/chart-config-custom-color-palettes' of https:/…

…/github.com/visualize-admin/visualization-tool into refactor/chart-config-custom-color-palettes

.dockerignore

@@ -1,3 +1,5 @@
 .git
 .next
-*Dockerfile*
+*Dockerfile*
+# Ignore node_modules to prevent issues with wrong binaries (e.g. sentry cli)
+node_modules

.eslintrc.json

@@ -7,10 +7,6 @@
       {
         "name": "lodash",
         "message": "Please use direct imports instead, ex: lodash/mapValues, lodash/groupBy."
-      },
-      {
-        "name": "d3",
-        "message": "Please use imports from individual d3 libraries, e.g. import { ascending } from 'd3-array'."
       }
     ],
     "react/display-name": "off",
@@ -59,7 +55,7 @@
   },
   "overrides": [
     {
-      "files": ["**/*.docs.tsx"], // Or *.test.js
+      "files": ["**/*.docs.tsx"],
       "rules": {
         "import/no-anonymous-default-export": "off"
       }

.github/workflows/base-checks.yml

@@ -0,0 +1,26 @@
+name: Validate
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  base-checks:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    strategy:
+      matrix:
+        job: [lint, typecheck, test, knip]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: "yarn"
+          cache-dependency-path: "**/yarn.lock"
+      - run: yarn install --immutable --prefer-offline
+      - run: yarn lingui compile
+      - run: yarn ${{ matrix.job }}

.github/workflows/chromatic.yml

@@ -14,9 +14,10 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
-          cache: yarn
-      - run: yarn install
+          node-version: 20.x
+          cache: "yarn"
+          cache-dependency-path: "**/yarn.lock"
+      - run: yarn install --immutable --prefer-offline
       - run: yarn lingui compile
       - run: yarn chromatic
         env:

.github/workflows/e2e.yml

@@ -1,6 +1,7 @@
 name: E2E
 
 on: [deployment_status]
+
 jobs:
   e2e:
     if: github.event.deployment_status.state == 'success'
@@ -17,10 +18,11 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: "yarn"
+          cache-dependency-path: "**/yarn.lock"
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install --immutable --prefer-offline
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps chromium
       - name: Run Playwright tests
@@ -41,36 +43,3 @@ jobs:
           name: blob-report-${{ matrix.shardIndex }}
           path: blob-report
           retention-days: 1
-  merge-reports:
-    if: ${{ !cancelled() }}
-    needs: [e2e]
-
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          # fetch all commits so we can find the branch
-          fetch-depth: 0
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 18.x
-          cache: "yarn"
-      - name: Install dependencies
-        run: yarn install --immutable
-
-      - name: Download blob reports from GitHub Actions Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          path: all-blob-reports
-          pattern: blob-report-*
-          merge-multiple: true
-
-      - name: Merge into HTML Report
-        run: npx playwright merge-reports --reporter html ./all-blob-reports
-
-      - name: Upload HTML report
-        uses: actions/upload-artifact@v4
-        with:
-          name: html-report--attempt-${{ github.run_attempt }}
-          path: playwright-report
-          retention-days: 14

.github/workflows/preload-varnish-cache.yml

@@ -4,17 +4,19 @@ on:
   workflow_dispatch:
   schedule:
     - cron: "0 0 * * *"
+
 jobs:
   preload-varnish-cache:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: "yarn"
+          cache-dependency-path: "**/yarn.lock"
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install --immutable --prefer-offline
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps chromium
       - name: Run Playwright test to preload Varnish cache

.gitlab-ci.yml

@@ -9,7 +9,7 @@ variables:
   RELEASE_IMAGE_TAG: $CI_REGISTRY_IMAGE:release
 
 lint:
-  image: node:18
+  image: node:20
   stage: lint
   script:
     - yarn --frozen-lockfile
@@ -33,7 +33,9 @@ release:
     - medium
   script:
     - pwd
-    - env DOCKER_IMAGE_TAGS="$RELEASE_IMAGE_TAG $CI_REGISTRY_IMAGE:$(./scripts/get-package-version.sh)" ./scripts/docker-build-push.sh
+    - env DOCKER_IMAGE_TAGS="$RELEASE_IMAGE_TAG
+      $CI_REGISTRY_IMAGE:$(./scripts/get-package-version.sh)"
+      ./scripts/docker-build-push.sh
   only:
     - /^v\d+\.\d+\.\d+$/ # use `yarn version` to create these tags
   except:

CHANGELOG.md

@@ -15,20 +15,37 @@ You can also check the
   - It's now possible to export charts as images
 	- Added support for custom colors in single and multi-colored charts, enabling enhanced visual customization.
 	- Introduced a new Color Picker, offering greater flexibility and precision in chart color selection.
+  - Added Footer to the Profile Page
 - Fixes
   - Color mapping is now correctly kept up to date in case of editing an old
     chart and the cube has been updated in the meantime and contains new values
     in the color dimension
   - Fixed preview via API (iframe)
   - Fixed cut table scroll-bars and unnecessary scroll of bar charts when
     switching between chart types
+  - Improved Readability for dataset selection and preview
   - Sorting dataset results by score option is now correctly available to select
+  - Created with visualize.admin.ch footnote is only displayed once, not twice,
+    when downloading an image of a published chart
+  - Changing dates manually using keyboard works correctly now in date picker
+    inputs
+  - Opening a temporal dimension with timezone in table chart configurator
+    doesn't crash the application anymore
+- Styles
+  - Updated dataset result borders to match the design
 - Maintenance
   - Re-enabled screenshot tests using Argos CI
   - Fixed E2E HAR-based tests
   - Fixed map dimension symbols to increase the elements size for small values,
     whilst preventing any 0 and undefined values from displaying
-  - Added Footer to the Profile Page
+  - Updated Next.js to v14
+  - Updated Node.js to v20
+  - Removed unused dependencies and dead code
+  - Updated several outdated packages
+  - Added knip as a new CI task
+- Performance
+  - Introduced sharding to improve performance of basic CI checks (unit tests,
+    type checks, linting, knip)
 - Docs
   - Added auto-generated JSON Schema files for configurator state and chart
     config and improved preview charts via API documentation

Dockerfile

@@ -1,10 +1,10 @@
-FROM node:18
+FROM node:20
 
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
 
 # build with
-# docker build \
+# docker build . \
 #   --build-arg PREVENT_SEARCH_BOTS=<true/false> \
 #   --build-arg COMMIT=$(git rev-parse HEAD) \
 #   --build-arg VECTOR_TILE_URL=<url of the vector service> \
@@ -54,6 +54,6 @@ RUN yarn build
 
 # Install only prod dependencies and start app
 RUN yarn install --frozen-lockfile --production && yarn cache clean
-CMD npm start
+CMD yarn start
 
 EXPOSE 3000

README.md

@@ -119,15 +119,6 @@ starts. In _development_, you'll have to run them manually:
 yarn db:migrate:dev
 ```
 
-Migrations are located in `db-migrations/`. Write SQL or JS migrations and
-follow the naming convention of the existing files
-`XXXXX-name-of-migration.{sql|js}`. Migrations are _immutable_, you will get an
-error if you change an already-run migration.
-
-For detailed instructions, please refer to the
-[postgres-migrations](https://github.com/thomwright/postgres-migrations)
-documentation.
-
 > [!WARNING]
 >
 > On Vercel environments like "preview" and "production", "production", database

app/auth-providers/adfs.ts

@@ -1,6 +1,6 @@
 import { OAuthConfig, OAuthUserConfig } from "next-auth/providers";
 
-export interface ADFSProfile extends Record<string, any> {
+interface ADFSProfile extends Record<string, any> {
   /**
    * The subject of the JWT (user)
    */

app/browser/dataset-browse.tsx

@@ -117,7 +117,7 @@ const useNavItemStyles = makeStyles<
     backgroundColor: level === 1 ? navItemTheme.activeBg : "transparent",
     color:
       level === 1
-        ? navItemTheme.closeColor ?? navItemTheme.activeTextColor
+        ? (navItemTheme.closeColor ?? navItemTheme.activeTextColor)
         : navItemTheme.activeBg,
   }),
 }));
@@ -1054,9 +1054,12 @@ const useResultStyles = makeStyles((theme: Theme) => ({
     padding: `${theme.spacing(4)} 0`,
     boxShadow: "none",
 
-    "&:not(:first-child)": {
+    "&:first-child": {
       borderTop: `1px solid ${theme.palette.grey[300]}`,
     },
+    "&:not(:first-child)": {
+      borderTop: `2px solid ${theme.palette.grey[300]}`,
+    },
   },
 
   titleClickable: {
@@ -1308,7 +1311,7 @@ export const DatasetResult = ({
   );
 };
 
-export type DatasetResultProps = ComponentProps<typeof DatasetResult>;
+type DatasetResultProps = ComponentProps<typeof DatasetResult>;
 
 DatasetResult.defaultProps = {
   showTags: true,

app/browser/dataset-preview.tsx

@@ -28,15 +28,28 @@ const useStyles = makeStyles<Theme, { descriptionPresent: boolean }>(
       paddingLeft: theme.spacing(4),
     },
     header: {
-      alignItems: "center",
       justifyContent: "space-between",
       marginBottom: theme.spacing(5),
+      [theme.breakpoints.up("md")]: {
+        flexDirection: "row",
+        alignItems: "center",
+      },
+      [theme.breakpoints.down("md")]: {
+        flexDirection: "column",
+        gap: theme.spacing(4),
+        alignItems: "start",
+      },
     },
     title: {
       color: theme.palette.grey[800],
     },
     createChartButton: {
-      marginLeft: theme.spacing(6),
+      [theme.breakpoints.up("md")]: {
+        marginLeft: theme.spacing(6),
+      },
+      [theme.breakpoints.down("md")]: {
+        marginLeft: 0,
+      },
       whiteSpace: "nowrap",
       flexShrink: 0,
     },
@@ -81,11 +94,6 @@ const useStyles = makeStyles<Theme, { descriptionPresent: boolean }>(
   })
 );
 
-export interface Preview {
-  iri: string;
-  label: string;
-}
-
 export const DataSetPreview = ({
   dataSetIri,
   dataSource,

app/browser/select-dataset-step.tsx

@@ -97,10 +97,12 @@ const useStyles = makeStyles<
   },
   panelBannerWrapper: {
     position: "static",
-    display: "grid",
-    gridTemplateColumns:
-      "minmax(12rem, 20rem) minmax(22rem, 1fr) minmax(12rem, 20rem)",
-    gridTemplateAreas: `". banner ."`,
+    [theme.breakpoints.up("sm")]: {
+      display: "grid",
+      gridTemplateColumns:
+        "minmax(12rem, 20rem) minmax(22rem, 1fr) minmax(12rem, 20rem)",
+      gridTemplateAreas: `". banner ."`,
+    },
     minHeight: BANNER_HEIGHT,
     marginTop: BANNER_MARGIN_TOP,
     backgroundColor: theme.palette.primary.light,
@@ -109,7 +111,9 @@ const useStyles = makeStyles<
     maxWidth: 1400,
     margin: "auto",
     padding: theme.spacing(4),
-    gridArea: "banner",
+    [theme.breakpoints.up("sm")]: {
+      gridArea: "banner",
+    },
   },
   panelBannerContent: {
     flexDirection: "column",

app/charts/area/rendering-utils.ts

@@ -1,9 +1,9 @@
 import { interpolatePath } from "d3-interpolate-path";
-import { Selection, select } from "d3-selection";
+import { select, Selection } from "d3-selection";
 
 import {
-  RenderOptions,
   maybeTransition,
+  RenderOptions,
 } from "@/charts/shared/rendering-utils";
 
 export type RenderAreaDatum = {