From 615c1dcccf06c6e6262d63bf15755fbf6aa1969f Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 09:19:16 +0100
Subject: [PATCH 01/33] chore: Add html-to-image

---
 app/package.json |   1 +
 yarn.lock        | 147 +++++++++++++++++++++++++++++------------------
 2 files changed, 93 insertions(+), 55 deletions(-)

diff --git a/app/package.json b/app/package.json
index e593ab727..66f7840dc 100644
--- a/app/package.json
+++ b/app/package.json
@@ -73,6 +73,7 @@
     "graphql-tag": "^2.11.0",
     "graphql-tools": "^7.0.5",
     "graphql-type-json": "^0.3.2",
+    "html-to-image": "^1.11.11",
     "iframe-resizer": "^4.2.11",
     "immer": "^9.0.6",
     "io-ts": "^2.2.21",
diff --git a/yarn.lock b/yarn.lock
index 95a66cd8d..946b63968 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -230,7 +230,29 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.2.tgz#278b6b13664557de95b8f35b90d96785850bb56e"
   integrity sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==
 
-"@babel/core@7.12.9", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.14.6", "@babel/core@^7.18.9", "@babel/core@^7.21.0", "@babel/core@^7.23.0", "@babel/core@^7.23.2", "@babel/core@^7.24.4", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
+"@babel/core@7.12.9":
+  version "7.12.9"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
+  integrity sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.5"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helpers" "^7.12.5"
+    "@babel/parser" "^7.12.7"
+    "@babel/template" "^7.12.7"
+    "@babel/traverse" "^7.12.9"
+    "@babel/types" "^7.12.7"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.18.9", "@babel/core@^7.21.0", "@babel/core@^7.23.0", "@babel/core@^7.23.2", "@babel/core@^7.24.4", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.0.tgz#d78b6023cc8f3114ccf049eb219613f74a747b40"
   integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
@@ -260,6 +282,17 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.12.5", "@babel/generator@^7.25.9", "@babel/generator@^7.26.0":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f"
+  integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==
+  dependencies:
+    "@babel/parser" "^7.26.2"
+    "@babel/types" "^7.26.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
 "@babel/generator@^7.20.14":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
@@ -290,17 +323,6 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.25.9", "@babel/generator@^7.26.0":
-  version "7.26.2"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f"
-  integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==
-  dependencies:
-    "@babel/parser" "^7.26.2"
-    "@babel/types" "^7.26.0"
-    "@jridgewell/gen-mapping" "^0.3.5"
-    "@jridgewell/trace-mapping" "^0.3.25"
-    jsesc "^3.0.2"
-
 "@babel/helper-annotate-as-pure@^7.14.5":
   version "7.14.5"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz"
@@ -538,6 +560,15 @@
     "@babel/traverse" "^7.25.9"
     "@babel/types" "^7.25.9"
 
+"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
 "@babel/helper-module-transforms@^7.14.5":
   version "7.15.8"
   resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz"
@@ -563,15 +594,6 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     "@babel/helper-validator-identifier" "^7.22.20"
 
-"@babel/helper-module-transforms@^7.26.0":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
-  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.25.9"
-    "@babel/helper-validator-identifier" "^7.25.9"
-    "@babel/traverse" "^7.25.9"
-
 "@babel/helper-optimise-call-expression@^7.14.5", "@babel/helper-optimise-call-expression@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz"
@@ -786,7 +808,7 @@
     "@babel/template" "^7.22.15"
     "@babel/types" "^7.22.19"
 
-"@babel/helpers@^7.26.0":
+"@babel/helpers@^7.12.5", "@babel/helpers@^7.26.0":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.0.tgz#30e621f1eba5aa45fe6f4868d2e9154d884119a4"
   integrity sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==
@@ -840,7 +862,12 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.20.15", "@babel/parser@^7.20.7", "@babel/parser@^7.21.2", "@babel/parser@^7.21.4", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.24.0", "@babel/parser@^7.24.4", "@babel/parser@^7.24.5", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2", "@babel/parser@^7.7.2":
+"@babel/parser@7.12.16":
+  version "7.12.16"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.16.tgz#cc31257419d2c3189d394081635703f549fc1ed4"
+  integrity sha512-c/+u9cqV6F0+4Hpq01jnJO+GLp2DdT63ppz9Xa+6cHaajM9VFzK/iDXiKK65YtpeVwu+ctfS6iqlMqRgQRzeCw==
+
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.20.15", "@babel/parser@^7.20.7", "@babel/parser@^7.21.2", "@babel/parser@^7.21.4", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.24.0", "@babel/parser@^7.24.4", "@babel/parser@^7.24.5", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2", "@babel/parser@^7.7.2":
   version "7.26.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11"
   integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==
@@ -2500,6 +2527,15 @@
   resolved "https://registry.npmjs.org/@babel/standalone/-/standalone-7.14.6.tgz"
   integrity sha512-oAoSp82jhJFnXKybKTOj5QF04XxiDRyiiqrFToiU1udlBXuZoADlPmmnOcuqBrZxSNNUjzJIVK8vt838Qoqjxg==
 
+"@babel/template@^7.12.7", "@babel/template@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
+  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
 "@babel/template@^7.15.4", "@babel/template@^7.3.3":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz"
@@ -2527,15 +2563,6 @@
     "@babel/parser" "^7.24.0"
     "@babel/types" "^7.24.0"
 
-"@babel/template@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
-  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
-  dependencies:
-    "@babel/code-frame" "^7.25.9"
-    "@babel/parser" "^7.25.9"
-    "@babel/types" "^7.25.9"
-
 "@babel/traverse@7.12.13":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz"
@@ -2566,6 +2593,19 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.12.9", "@babel/traverse@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
+  integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/generator" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.25.9"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.18.9", "@babel/traverse@^7.23.2":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.0.tgz#4a408fbf364ff73135c714a2ab46a5eab2831b1e"
@@ -2598,19 +2638,6 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/traverse@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
-  integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
-  dependencies:
-    "@babel/code-frame" "^7.25.9"
-    "@babel/generator" "^7.25.9"
-    "@babel/parser" "^7.25.9"
-    "@babel/template" "^7.25.9"
-    "@babel/types" "^7.25.9"
-    debug "^4.3.1"
-    globals "^11.1.0"
-
 "@babel/types@7.12.13":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz"
@@ -2628,6 +2655,14 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.12.7", "@babel/types@^7.25.9", "@babel/types@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
+  integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
 "@babel/types@^7.16.7":
   version "7.17.0"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz"
@@ -2690,14 +2725,6 @@
     "@babel/helper-validator-identifier" "^7.24.5"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.25.9", "@babel/types@^7.26.0":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
-  integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==
-  dependencies:
-    "@babel/helper-string-parser" "^7.25.9"
-    "@babel/helper-validator-identifier" "^7.25.9"
-
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -15641,7 +15668,7 @@ fwd-stream@^1.0.4:
   dependencies:
     readable-stream "~1.0.26-4"
 
-gensync@^1.0.0-beta.2:
+gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
@@ -16459,6 +16486,11 @@ html-tags@^3.1.0:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
   integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
 
+html-to-image@^1.11.11:
+  version "1.11.11"
+  resolved "https://registry.yarnpkg.com/html-to-image/-/html-to-image-1.11.11.tgz#c0f8a34dc9e4b97b93ff7ea286eb8562642ebbea"
+  integrity sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==
+
 html-void-elements@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz"
@@ -22328,7 +22360,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz"
   integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@1.22.8, resolve@^1.14.2, resolve@^1.22.8:
+resolve@1.22.8, resolve@^1.14.2, resolve@^1.22.8, resolve@^1.3.2:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -22676,6 +22708,11 @@ semver@7.x, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^5.4.1:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
 semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"

From 85e46a456f06f2804171804583efd793e47f30a2 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 09:19:25 +0100
Subject: [PATCH 02/33] feat: Add screenshot-making logic

---
 app/utils/use-screenshot.ts | 100 ++++++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 app/utils/use-screenshot.ts

diff --git a/app/utils/use-screenshot.ts b/app/utils/use-screenshot.ts
new file mode 100644
index 000000000..880218e0a
--- /dev/null
+++ b/app/utils/use-screenshot.ts
@@ -0,0 +1,100 @@
+import { toPng, toSvg } from "html-to-image";
+import { useCallback, useState } from "react";
+
+type ScreenshotFileFormat = "png" | "svg";
+
+export const useScreenshot = ({
+  type,
+  screenshotName,
+  screenshotNode,
+  modifyNode: _modifyNode,
+}: {
+  type: ScreenshotFileFormat;
+  screenshotName: string;
+  screenshotNode?: HTMLElement | null;
+  modifyNode?: (d: HTMLElement) => void;
+}) => {
+  const [loading, setLoading] = useState(false);
+  const modifyNode = useCallback(
+    (node: HTMLElement) => {
+      removeDisabledElements(node);
+
+      if (_modifyNode) {
+        _modifyNode(node);
+      }
+    },
+    [_modifyNode]
+  );
+  const screenshot = useCallback(async () => {
+    if (screenshotNode) {
+      setLoading(true);
+      try {
+        await makeScreenshot({
+          type,
+          name: screenshotName,
+          node: screenshotNode,
+          modifyNode,
+        });
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    }
+  }, [type, screenshotName, screenshotNode, modifyNode]);
+
+  return { loading, screenshot };
+};
+
+const makeScreenshot = async ({
+  type,
+  name,
+  node,
+  modifyNode,
+}: {
+  type: "png" | "svg";
+  name: string;
+  node: HTMLElement;
+  modifyNode?: (d: HTMLElement) => void;
+}) => {
+  const isUsingSafari =
+    typeof window !== "undefined"
+      ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+      : false;
+  // Add wrapper node to prevent overflow issues in the screenshot
+  const wrapperNode = document.createElement("div");
+  wrapperNode.style.width = `${node.offsetWidth}px`;
+  document.body.appendChild(wrapperNode);
+  const clonedNode = node.cloneNode(true) as HTMLElement;
+  wrapperNode.appendChild(clonedNode);
+  modifyNode?.(clonedNode);
+
+  // There's a bug with embedding the fonts in Safari, which appears only when
+  // downloading the image for the first time. On subsequent downloads, the
+  // font is embedded correctly. To work around this issue, we call the toPng
+  // function twice.
+  if (isUsingSafari && type === "png") {
+    await toPng(wrapperNode);
+  }
+
+  await (type === "png" ? toPng : toSvg)(wrapperNode)
+    .then((dataUrl) => {
+      const a = document.createElement("a");
+      a.href = dataUrl;
+      a.download = `${name}.${type}`;
+      a.click();
+    })
+    .catch((error) => console.error(error))
+    .finally(() => wrapperNode.remove());
+};
+
+export const DISABLE_SCREENSHOT_ATTR_KEY = "data-disable-screenshot";
+/** Apply this attribute to elements that should not be included in the screenshot. */
+export const DISABLE_SCREENSHOT_ATTR = {
+  [DISABLE_SCREENSHOT_ATTR_KEY]: true,
+};
+const removeDisabledElements = (node: HTMLElement) => {
+  node
+    .querySelectorAll(`[${DISABLE_SCREENSHOT_ATTR_KEY}="true"]`)
+    .forEach((el) => el.remove());
+};

From 2ef79112830ed021da1fc66a0e3a2d308ee71680 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 09:44:18 +0100
Subject: [PATCH 03/33] fix: Making screenshots of canvas elements

---
 app/charts/map/map.tsx      |  2 ++
 app/utils/use-screenshot.ts | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx
index bb2a3fd5e..b1b8037ec 100644
--- a/app/charts/map/map.tsx
+++ b/app/charts/map/map.tsx
@@ -403,6 +403,8 @@ export const MapComponent = () => {
           initialViewState={defaultViewState}
           mapLib={maplibregl}
           mapStyle={mapStyle}
+          // Important so we can take a screenshot of the map
+          preserveDrawingBuffer
           style={{
             position: "absolute",
             left: 0,
diff --git a/app/utils/use-screenshot.ts b/app/utils/use-screenshot.ts
index 880218e0a..2a3728019 100644
--- a/app/utils/use-screenshot.ts
+++ b/app/utils/use-screenshot.ts
@@ -1,3 +1,4 @@
+import { select } from "d3-selection";
 import { toPng, toSvg } from "html-to-image";
 import { useCallback, useState } from "react";
 
@@ -65,7 +66,24 @@ const makeScreenshot = async ({
   const wrapperNode = document.createElement("div");
   wrapperNode.style.width = `${node.offsetWidth}px`;
   document.body.appendChild(wrapperNode);
+
   const clonedNode = node.cloneNode(true) as HTMLElement;
+
+  const canvasNodes = select(node)
+    .selectAll<HTMLCanvasElement, unknown>("canvas")
+    .nodes();
+  const clonedCanvasNodes = select(clonedNode)
+    .selectAll<HTMLCanvasElement, unknown>("canvas")
+    .nodes();
+
+  for (const canvasNode of canvasNodes) {
+    const clonedCanvasNode = clonedCanvasNodes[canvasNodes.indexOf(canvasNode)];
+    // Cloning the canvas element does not copy the content, so we need to
+    // manually copy it.
+    const ctx = clonedCanvasNode.getContext("2d") as CanvasRenderingContext2D;
+    ctx.drawImage(canvasNode, 0, 0);
+  }
+
   wrapperNode.appendChild(clonedNode);
   modifyNode?.(clonedNode);
 

From 90c905ff9699833ecdf6c3c6f843d6101deacd74 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 10:45:37 +0100
Subject: [PATCH 04/33] feat: Allow the MenuActionItem to be disabled

---
 app/components/menu-action-item.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/components/menu-action-item.tsx b/app/components/menu-action-item.tsx
index f9a116e80..c66aaf384 100644
--- a/app/components/menu-action-item.tsx
+++ b/app/components/menu-action-item.tsx
@@ -17,6 +17,7 @@ const StyledMenuItem = styled(MenuItem)(({ theme, color }) => ({
   whiteSpace: "normal",
 })) as typeof MenuItem;
 export type MenuActionProps = {
+  disabled?: boolean;
   label: string | NonNullable<React.ReactNode>;
   trailingIconName?: IconName;
   leadingIconName?: IconName;
@@ -50,7 +51,7 @@ export type MenuActionProps = {
 export const MenuActionItem = (
   props: MenuActionProps & { as: "menuitem" | "button" }
 ) => {
-  const { label, trailingIconName, leadingIconName } = props;
+  const { disabled, label, trailingIconName, leadingIconName } = props;
   const {
     isOpen: isConfirmationOpen,
     open: openConfirmation,
@@ -97,6 +98,7 @@ export const MenuActionItem = (
       return (
         <Button
           size="xsmall"
+          disabled={disabled}
           color={color}
           variant="contained"
           {...forwardedProps}
@@ -111,11 +113,10 @@ export const MenuActionItem = (
       <>
         <StyledMenuItem
           color={color}
+          disabled={disabled}
           component={props.type === "link" ? Link : "div"}
           {...forwardedProps}
-          sx={{
-            minHeight: 0,
-          }}
+          sx={{ minHeight: 0 }}
         >
           {leadingIcon && (
             <Icon

From ebdd3c6056c884a016675875ca95456ab650b194 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 10:48:52 +0100
Subject: [PATCH 05/33] feat: Disable certain elements from being screenshotted

---
 app/charts/table/table.tsx                | 6 +++++-
 app/components/chart-preview.tsx          | 9 +++++++++
 app/components/chart-shared.tsx           | 2 ++
 app/components/debug-panel/DebugPanel.tsx | 8 +++++++-
 app/components/metadata-panel.tsx         | 2 ++
 5 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/app/charts/table/table.tsx b/app/charts/table/table.tsx
index 44942980b..9cf043967 100644
--- a/app/charts/table/table.tsx
+++ b/app/charts/table/table.tsx
@@ -25,6 +25,7 @@ import { TableChartState } from "@/charts/table/table-state";
 import Flex from "@/components/flex";
 import { Input, Switch } from "@/components/form";
 import { Observation } from "@/domain/data";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 const MOBILE_VIEW_THRESHOLD = 384;
 
@@ -299,7 +300,10 @@ export const Table = () => {
   return (
     <>
       {showSearch && (
-        <Box sx={{ mb: 4, width: "min(100%, 300px)" }}>
+        <Box
+          sx={{ mb: 4, width: "min(100%, 300px)" }}
+          {...DISABLE_SCREENSHOT_ATTR}
+        >
           <Input
             type="text"
             name="search-input"
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 7976912d2..3b40fbfba 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -63,6 +63,7 @@ import { InteractiveFiltersChartProvider } from "@/stores/interactive-filters";
 import { useTransitionStore } from "@/stores/transition";
 import { useTheme } from "@/themes";
 import { createSnapCornerToCursor } from "@/utils/dnd";
+import { DISABLE_SCREENSHOT_ATTR_KEY } from "@/utils/use-screenshot";
 
 export const ChartPreview = ({ dataSource }: { dataSource: DataSource }) => {
   const [state] = useConfiguratorState(hasChartConfigs);
@@ -474,6 +475,10 @@ const ChartPreviewInner = ({
                               })
                           : undefined
                       }
+                      {...{
+                        [DISABLE_SCREENSHOT_ATTR_KEY]:
+                          !chartConfig.meta.title[locale],
+                      }}
                     />
                   ) : (
                     // We need to have a span here to keep the space between the
@@ -507,6 +512,10 @@ const ChartPreviewInner = ({
                           }
                         : undefined
                     }
+                    {...{
+                      [DISABLE_SCREENSHOT_ATTR_KEY]:
+                        !chartConfig.meta.description[locale],
+                    }}
                   />
                 ) : (
                   // We need to have a span here to keep the space between the
diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 99ddfe753..b89c423fd 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -27,6 +27,7 @@ import { getChartIcon } from "@/icons";
 import SvgIcMore from "@/icons/components/IcMore";
 import { useLocale } from "@/src";
 import { createChartId } from "@/utils/create-chart-id";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 /** Generic styles shared between `ChartPreview` and `ChartPublished`. */
 export const useChartStyles = makeStyles<Theme, { disableBorder?: boolean }>(
@@ -136,6 +137,7 @@ export const ChartMoreButton = ({
         color="secondary"
         onClick={(ev) => setAnchor(ev.currentTarget)}
         sx={{ height: "fit-content" }}
+        {...DISABLE_SCREENSHOT_ATTR}
       >
         <SvgIcMore />
       </IconButton>
diff --git a/app/components/debug-panel/DebugPanel.tsx b/app/components/debug-panel/DebugPanel.tsx
index 164a294b8..779ed2dd4 100644
--- a/app/components/debug-panel/DebugPanel.tsx
+++ b/app/components/debug-panel/DebugPanel.tsx
@@ -27,6 +27,7 @@ import SvgIcChevronRight from "@/icons/components/IcChevronRight";
 import { useLocale } from "@/src";
 import { useInteractiveFiltersGetState } from "@/stores/interactive-filters";
 import useEvent from "@/utils/use-event";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 const DebugInteractiveFilters = () => {
   const getInteractiveFiltersState = useInteractiveFiltersGetState();
@@ -200,7 +201,12 @@ const DebugPanel = (props: DebugPanelProps) => {
   const classes = useStyles();
 
   return (
-    <Accordion disableGutters className={classes.debugPanel} square>
+    <Accordion
+      disableGutters
+      className={classes.debugPanel}
+      square
+      {...DISABLE_SCREENSHOT_ATTR}
+    >
       <AccordionSummary
         expandIcon={
           <Box p={2}>
diff --git a/app/components/metadata-panel.tsx b/app/components/metadata-panel.tsx
index a0fa0be3d..cd1800648 100644
--- a/app/components/metadata-panel.tsx
+++ b/app/components/metadata-panel.tsx
@@ -80,6 +80,7 @@ import { assert } from "@/utils/assert";
 import { useEventEmitter } from "@/utils/eventEmitter";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 import useEvent from "@/utils/use-event";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 import Flex from "./flex";
 import { JoinByChip } from "./JoinByChip";
@@ -370,6 +371,7 @@ const ToggleButton = ({ onClick }: { onClick: () => void }) => {
       color="primary"
       size="small"
       onClick={onClick}
+      {...DISABLE_SCREENSHOT_ATTR}
     >
       <Typography variant="body2">
         <Trans id="controls.metadata-panel.metadata">Details</Trans>

From 53a9efafe2adb6ba497d7c07464d27290738c24d Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 10:49:34 +0100
Subject: [PATCH 06/33] feat: Add a way to screenshot charts

---
 app/components/chart-preview.tsx | 17 +++++--
 app/components/chart-shared.tsx  | 76 ++++++++++++++++++++++++++++----
 2 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 3b40fbfba..b5d3b2f24 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -10,7 +10,14 @@ import { Trans } from "@lingui/macro";
 import { Box } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import Head from "next/head";
-import { forwardRef, ReactNode, useCallback, useMemo, useState } from "react";
+import {
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { DataSetTable } from "@/browse/datatable";
 import { LoadingStateProvider } from "@/charts/shared/chart-loading-state";
@@ -394,6 +401,7 @@ const ChartPreviewInner = ({
   chartKey?: string | null;
   actionElementSlot?: ReactNode;
 }) => {
+  const ref = useRef<HTMLDivElement>(null);
   const [state, dispatch] = useConfiguratorState();
   const configuring = isConfiguring(state);
   const chartConfig = getChartConfig(state, chartKey);
@@ -434,7 +442,7 @@ const ChartPreviewInner = ({
   }, [dimensions, measures]);
 
   return (
-    <Box className={chartClasses.root}>
+    <Box ref={ref} className={chartClasses.root}>
       {children}
       <ChartErrorBoundary resetKeys={[state]}>
         {hasChartConfigs(state) && (
@@ -493,7 +501,10 @@ const ChartPreviewInner = ({
                       mt: "-0.33rem",
                     }}
                   >
-                    <ChartMoreButton chartKey={chartConfig.key} />
+                    <ChartMoreButton
+                      chartKey={chartConfig.key}
+                      chartWrapperNode={ref.current}
+                    />
                     {actionElementSlot}
                   </Box>
                 </Flex>
diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index b89c423fd..c9ae518e7 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -27,7 +27,7 @@ import { getChartIcon } from "@/icons";
 import SvgIcMore from "@/icons/components/IcMore";
 import { useLocale } from "@/src";
 import { createChartId } from "@/utils/create-chart-id";
-import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
+import { DISABLE_SCREENSHOT_ATTR, useScreenshot } from "@/utils/use-screenshot";
 
 /** Generic styles shared between `ChartPreview` and `ChartPublished`. */
 export const useChartStyles = makeStyles<Theme, { disableBorder?: boolean }>(
@@ -113,19 +113,23 @@ export const ChartControls = ({
 export const ChartMoreButton = ({
   configKey,
   chartKey,
+  chartWrapperNode,
 }: {
   configKey?: string;
   chartKey: string;
+  chartWrapperNode?: HTMLElement | null;
 }) => {
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
   const [anchor, setAnchor] = useState<HTMLElement | null>(null);
   const handleClose = useEventCallback(() => setAnchor(null));
   const chartConfig = getChartConfig(state, chartKey);
   const { setIsTableRaw } = useChartTablePreview();
+
   // Reset back to chart view when switching chart type.
   useEffect(() => {
     setIsTableRaw(false);
   }, [chartConfig.chartType, setIsTableRaw]);
+
   const disableButton =
     isPublished(state) &&
     state.layout.type === "dashboard" &&
@@ -151,10 +155,22 @@ export const ChartMoreButton = ({
         {isPublished(state) ? (
           <div>
             {chartConfig.chartType !== "table" ? (
-              <TableViewChartMenuActionItem
-                chartType={chartConfig.chartType}
-                onSuccess={handleClose}
-              />
+              <>
+                <TableViewChartMenuActionItem
+                  chartType={chartConfig.chartType}
+                  onSuccess={handleClose}
+                />
+                <DownloadImageMenuActionItem
+                  type="png"
+                  screenshotName={chartKey}
+                  screenshotNode={chartWrapperNode}
+                />
+                <DownloadImageMenuActionItem
+                  type="svg"
+                  screenshotName={chartKey}
+                  screenshotNode={chartWrapperNode}
+                />
+              </>
             ) : null}
             {state.layout.type !== "dashboard" && configKey ? (
               <>
@@ -182,10 +198,22 @@ export const ChartMoreButton = ({
               onSuccess={handleClose}
             />
             {chartConfig.chartType !== "table" ? (
-              <TableViewChartMenuActionItem
-                chartType={chartConfig.chartType}
-                onSuccess={handleClose}
-              />
+              <>
+                <TableViewChartMenuActionItem
+                  chartType={chartConfig.chartType}
+                  onSuccess={handleClose}
+                />
+                <DownloadImageMenuActionItem
+                  type="png"
+                  screenshotName={chartKey}
+                  screenshotNode={chartWrapperNode}
+                />
+                <DownloadImageMenuActionItem
+                  type="svg"
+                  screenshotName={chartKey}
+                  screenshotNode={chartWrapperNode}
+                />
+              </>
             ) : null}
             {state.chartConfigs.length > 1 ? (
               <MenuActionItem
@@ -315,3 +343,33 @@ const TableViewChartMenuActionItem = ({
     />
   );
 };
+
+const DownloadImageMenuActionItem = ({
+  type,
+  screenshotName,
+  screenshotNode,
+  modifyNode,
+}: {
+  type: "png" | "svg";
+  screenshotName: string;
+  screenshotNode?: HTMLElement | null;
+  modifyNode?: (node: HTMLElement) => void;
+}) => {
+  const { loading, screenshot } = useScreenshot({
+    type,
+    screenshotName,
+    screenshotNode,
+    modifyNode,
+  });
+
+  return (
+    <MenuActionItem
+      type="button"
+      as="menuitem"
+      onClick={screenshot}
+      disabled={loading}
+      leadingIconName="download"
+      label={type.toUpperCase()}
+    />
+  );
+};

From 586430155793a543e5f06ce1403abe7b511e8c4e Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 10:50:00 +0100
Subject: [PATCH 07/33] docs: Update CHANGELOG

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 27a982b15..25ecaed66 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,8 @@ You can also check the
 
 # Unreleased
 
-Nothing yet.
+- Features
+  - It's now possible to export charts as images
 
 # [5.0.2] - 2024-11-28
 

From dd3c3d0ba6879b9d0c898954f850857995de6bc2 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 12:48:51 +0100
Subject: [PATCH 08/33] feat: Disable interactive filters panel from
 screenshots

---
 app/components/chart-shared.tsx   | 2 ++
 app/components/metadata-panel.tsx | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index c9ae518e7..fb19deb4a 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -76,8 +76,10 @@ export const ChartControls = ({
     chartConfig,
     dashboardFilters,
   });
+
   return (
     <Box
+      {...DISABLE_SCREENSHOT_ATTR}
       sx={{
         display: "grid",
         gridTemplateAreas: `
diff --git a/app/components/metadata-panel.tsx b/app/components/metadata-panel.tsx
index cd1800648..a0fa0be3d 100644
--- a/app/components/metadata-panel.tsx
+++ b/app/components/metadata-panel.tsx
@@ -80,7 +80,6 @@ import { assert } from "@/utils/assert";
 import { useEventEmitter } from "@/utils/eventEmitter";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 import useEvent from "@/utils/use-event";
-import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 import Flex from "./flex";
 import { JoinByChip } from "./JoinByChip";
@@ -371,7 +370,6 @@ const ToggleButton = ({ onClick }: { onClick: () => void }) => {
       color="primary"
       size="small"
       onClick={onClick}
-      {...DISABLE_SCREENSHOT_ATTR}
     >
       <Typography variant="body2">
         <Trans id="controls.metadata-panel.metadata">Details</Trans>

From 76685112fed3a1a97dfd23a8bd74a3d49f12e8cf Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 13:54:37 +0100
Subject: [PATCH 09/33] chore: Add meta-png

---
 app/package.json | 1 +
 yarn.lock        | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/app/package.json b/app/package.json
index 66f7840dc..65e2ef6a1 100644
--- a/app/package.json
+++ b/app/package.json
@@ -81,6 +81,7 @@
     "lodash": "^4.17.21",
     "make-plural": "6.2.2",
     "maplibre-gl": "^3.6.2",
+    "meta-png": "^1.0.6",
     "micro": "^9.3.4",
     "microee": "^0.0.6",
     "mitt": "^3.0.1",
diff --git a/yarn.lock b/yarn.lock
index 946b63968..c7d8512ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19313,6 +19313,11 @@ meros@1.1.4:
   resolved "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz"
   integrity sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==
 
+meta-png@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/meta-png/-/meta-png-1.0.6.tgz#34d78a403cc1c809978d3e9f89485a2700daafce"
+  integrity sha512-eQtEi5E9axqwqA/sDK1dyhX9kYHCUe2m+45aQ3JHrozjGPs+/ab+hdhPp7A3GUNW+ZAbavrsg5xQ4r5jkGDX+A==
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"

From 98b957c02756c5aa0145770050efdae4cbe78b9b Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 14:48:23 +0100
Subject: [PATCH 10/33] feat: Add a way to attach file metadata to PNG
 screenshots

---
 app/components/chart-shared.tsx | 17 ++++----
 app/utils/use-screenshot.ts     | 75 +++++++++++++++++++++++++++------
 2 files changed, 72 insertions(+), 20 deletions(-)

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index fb19deb4a..3db36251b 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -1,4 +1,4 @@
-import { Trans, t } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { Box, IconButton, Theme, useEventCallback } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { ComponentProps, useEffect, useState } from "react";
@@ -27,7 +27,11 @@ import { getChartIcon } from "@/icons";
 import SvgIcMore from "@/icons/components/IcMore";
 import { useLocale } from "@/src";
 import { createChartId } from "@/utils/create-chart-id";
-import { DISABLE_SCREENSHOT_ATTR, useScreenshot } from "@/utils/use-screenshot";
+import {
+  DISABLE_SCREENSHOT_ATTR,
+  useScreenshot,
+  UseScreenshotProps,
+} from "@/utils/use-screenshot";
 
 /** Generic styles shared between `ChartPreview` and `ChartPublished`. */
 export const useChartStyles = makeStyles<Theme, { disableBorder?: boolean }>(
@@ -351,17 +355,14 @@ const DownloadImageMenuActionItem = ({
   screenshotName,
   screenshotNode,
   modifyNode,
-}: {
-  type: "png" | "svg";
-  screenshotName: string;
-  screenshotNode?: HTMLElement | null;
-  modifyNode?: (node: HTMLElement) => void;
-}) => {
+  pngMetadata,
+}: UseScreenshotProps) => {
   const { loading, screenshot } = useScreenshot({
     type,
     screenshotName,
     screenshotNode,
     modifyNode,
+    pngMetadata,
   });
 
   return (
diff --git a/app/utils/use-screenshot.ts b/app/utils/use-screenshot.ts
index 2a3728019..a95534f97 100644
--- a/app/utils/use-screenshot.ts
+++ b/app/utils/use-screenshot.ts
@@ -1,20 +1,25 @@
 import { select } from "d3-selection";
 import { toPng, toSvg } from "html-to-image";
+import { addMetadata } from "meta-png";
 import { useCallback, useState } from "react";
 
 type ScreenshotFileFormat = "png" | "svg";
 
+export type UseScreenshotProps = {
+  type: ScreenshotFileFormat;
+  screenshotName: string;
+  screenshotNode?: HTMLElement | null;
+  modifyNode?: (d: HTMLElement) => void;
+  pngMetadata?: { key: PNG_METADATA_KEY; value: string }[];
+};
+
 export const useScreenshot = ({
   type,
   screenshotName,
   screenshotNode,
   modifyNode: _modifyNode,
-}: {
-  type: ScreenshotFileFormat;
-  screenshotName: string;
-  screenshotNode?: HTMLElement | null;
-  modifyNode?: (d: HTMLElement) => void;
-}) => {
+  pngMetadata,
+}: UseScreenshotProps) => {
   const [loading, setLoading] = useState(false);
   const modifyNode = useCallback(
     (node: HTMLElement) => {
@@ -35,6 +40,7 @@ export const useScreenshot = ({
           name: screenshotName,
           node: screenshotNode,
           modifyNode,
+          pngMetadata,
         });
       } catch (error) {
         console.error(error);
@@ -42,21 +48,41 @@ export const useScreenshot = ({
         setLoading(false);
       }
     }
-  }, [type, screenshotName, screenshotNode, modifyNode]);
+  }, [screenshotNode, type, screenshotName, modifyNode, pngMetadata]);
 
-  return { loading, screenshot };
+  return {
+    loading,
+    screenshot,
+  };
 };
 
+// https://dev.exiv2.org/projects/exiv2/wiki/The_Metadata_in_PNG_files#2-Textual-information-chunks-the-metadata-in-PNG
+// We can use custom keys, but we should avoid using keys that are already used
+// by other software.
+type PNG_METADATA_KEY =
+  | "Title"
+  | "Author"
+  | "Description"
+  | "Copyright"
+  | "Creation Time"
+  | "Software"
+  | "Disclaimer"
+  | "Warning"
+  | "Source"
+  | "Comment";
+
 const makeScreenshot = async ({
   type,
   name,
   node,
   modifyNode,
+  pngMetadata,
 }: {
   type: "png" | "svg";
   name: string;
   node: HTMLElement;
   modifyNode?: (d: HTMLElement) => void;
+  pngMetadata?: { key: PNG_METADATA_KEY; value: string }[];
 }) => {
   const isUsingSafari =
     typeof window !== "undefined"
@@ -97,10 +123,35 @@ const makeScreenshot = async ({
 
   await (type === "png" ? toPng : toSvg)(wrapperNode)
     .then((dataUrl) => {
-      const a = document.createElement("a");
-      a.href = dataUrl;
-      a.download = `${name}.${type}`;
-      a.click();
+      const download = (dataUrl: string) => {
+        const a = document.createElement("a");
+        a.href = dataUrl;
+        a.download = `${name}.${type}`;
+        a.click();
+      };
+
+      switch (type) {
+        case "png": {
+          let arrayBuffer = Uint8Array.from(atob(dataUrl.split(",")[1]), (c) =>
+            c.charCodeAt(0)
+          );
+
+          pngMetadata?.forEach(({ key, value }) => {
+            arrayBuffer = addMetadata(arrayBuffer, key, value);
+          });
+
+          const dataUrlWithMetadata = `data:image/png;base64,${Buffer.from(
+            arrayBuffer
+          ).toString("base64")}`;
+
+          return download(dataUrlWithMetadata);
+        }
+        case "svg":
+          return download(dataUrl);
+        default:
+          const _exhaustiveCheck: never = type;
+          return _exhaustiveCheck;
+      }
     })
     .catch((error) => console.error(error))
     .finally(() => wrapperNode.remove());

From 17239457a9dae617a3e2d3616408929caae40e92 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 14:54:52 +0100
Subject: [PATCH 11/33] refactor: Extract

---
 app/charts/shared/chart-helpers.tsx | 14 ++++++++++++++
 app/components/chart-footnotes.tsx  | 12 ++----------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx
index 1a9ca605d..0522f1980 100644
--- a/app/charts/shared/chart-helpers.tsx
+++ b/app/charts/shared/chart-helpers.tsx
@@ -287,6 +287,20 @@ export const extractChartConfigComponentIds = ({
   );
 };
 
+export const extractChartConfigUsedCubes = (
+  chartConfig: ChartConfig,
+  { components }: { components: Component[] }
+) => {
+  const componentIds = extractChartConfigComponentIds({
+    chartConfig,
+    includeFilters: false,
+  });
+
+  return componentIds
+    .map((id) => components.find((component) => component.id === id))
+    .filter(truthy); // exclude potential joinBy components
+};
+
 /** Use to remove missing values from chart data. */
 export const usePlottableData = (
   data: Observation[],
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
index e3af0fce4..4b65c81e7 100644
--- a/app/components/chart-footnotes.tsx
+++ b/app/components/chart-footnotes.tsx
@@ -4,7 +4,7 @@ import { makeStyles } from "@mui/styles";
 import uniqBy from "lodash/uniqBy";
 import { useMemo } from "react";
 
-import { extractChartConfigComponentIds } from "@/charts/shared/chart-helpers";
+import { extractChartConfigUsedCubes } from "@/charts/shared/chart-helpers";
 import { LegendItem } from "@/charts/shared/legend-color";
 import { ChartFiltersList } from "@/components/chart-filters-list";
 import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
@@ -17,7 +17,6 @@ import {
   DataSource,
 } from "@/configurator";
 import { Component, Measure } from "@/domain/data";
-import { truthy } from "@/domain/types";
 import { useTimeFormatLocale } from "@/formatters";
 import { useDataCubesMetadataQuery } from "@/graphql/hooks";
 import { useLocale } from "@/locales/use-locale";
@@ -57,14 +56,7 @@ export const ChartFootnotes = ({
 }) => {
   const locale = useLocale();
   const usedComponents = useMemo(() => {
-    const componentIds = extractChartConfigComponentIds({
-      chartConfig,
-      includeFilters: false,
-    });
-
-    return componentIds
-      .map((id) => components.find((component) => component.id === id))
-      .filter(truthy); // exclude potential joinBy components
+    return extractChartConfigUsedCubes(chartConfig, { components });
   }, [chartConfig, components]);
   const [{ data }] = useDataCubesMetadataQuery({
     variables: {

From 3506fac1b00a3bce10266cd63bcbf5b0c398732d Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Tue, 3 Dec 2024 15:24:16 +0100
Subject: [PATCH 12/33] fix: Enable screenshots in published mode

---
 app/components/chart-published.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 7673676ee..611762d2a 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -317,8 +317,8 @@ const ChartPublishedInnerImpl = (props: ChartPublishInnerProps) => {
 
   return (
     <Box
-      className={clsx(chartClasses.root, publishedChartClasses.root, className)}
       ref={rootRef}
+      className={clsx(chartClasses.root, publishedChartClasses.root, className)}
     >
       {children}
       <ChartErrorBoundary resetKeys={[chartConfig]}>
@@ -392,6 +392,7 @@ const ChartPublishedInnerImpl = (props: ChartPublishInnerProps) => {
                 <ChartMoreButton
                   configKey={configKey}
                   chartKey={chartConfig.key}
+                  chartWrapperNode={rootRef.current}
                 />
               </Box>
             </Flex>

From f484bf7cdcc4204ba47fd10a664cee224e9c261f Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Wed, 4 Dec 2024 11:21:25 +0100
Subject: [PATCH 13/33] feat: Disable more interactive elements from
 screenshots

---
 app/charts/shared/brush/index.tsx                    | 2 ++
 app/charts/shared/containers.tsx                     | 2 ++
 app/components/drag-handle.tsx                       | 2 ++
 app/configurator/interactive-filters/time-slider.tsx | 2 ++
 4 files changed, 8 insertions(+)

diff --git a/app/charts/shared/brush/index.tsx b/app/charts/shared/brush/index.tsx
index 17560a1f0..a3447fb20 100644
--- a/app/charts/shared/brush/index.tsx
+++ b/app/charts/shared/brush/index.tsx
@@ -32,6 +32,7 @@ import {
 } from "@/stores/interactive-filters";
 import { useTransitionStore } from "@/stores/transition";
 import { getTextWidth } from "@/utils/get-text-width";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 // Brush constants
 const HANDLE_HEIGHT = 14;
@@ -371,6 +372,7 @@ export const BrushTime = () => {
 
   return fullData.length ? (
     <g
+      {...DISABLE_SCREENSHOT_ATTR}
       transform={`translate(0, ${
         chartHeight + margins.top + margins.bottom - HEIGHT * 1.5
       })`}
diff --git a/app/charts/shared/containers.tsx b/app/charts/shared/containers.tsx
index 652cc960c..8c2a6efdb 100644
--- a/app/charts/shared/containers.tsx
+++ b/app/charts/shared/containers.tsx
@@ -12,6 +12,7 @@ import {
   useConfiguratorState,
 } from "@/configurator";
 import { useTransitionStore } from "@/stores/transition";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 export const useStyles = makeStyles<{}, {}, "chartContainer">(() => ({
   chartContainer: {
@@ -70,6 +71,7 @@ export const ChartSvg = ({ children }: { children: ReactNode }) => {
     >
       {interactiveFiltersConfig?.calculation.active && (
         <foreignObject
+          {...DISABLE_SCREENSHOT_ATTR}
           width={width - margins.right}
           y={20}
           height="26"
diff --git a/app/components/drag-handle.tsx b/app/components/drag-handle.tsx
index e4da0cd1f..3b429bdd7 100644
--- a/app/components/drag-handle.tsx
+++ b/app/components/drag-handle.tsx
@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { forwardRef, Ref } from "react";
 
 import { Icon } from "@/icons";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 import { useIconStyles } from "./chart-selection-tabs";
 
@@ -18,6 +19,7 @@ export const DragHandle = forwardRef<HTMLDivElement, DragHandleProps>(
 
     return (
       <Box
+        {...DISABLE_SCREENSHOT_ATTR}
         ref={ref}
         {...rest}
         className={clsx(classes.dragIconWrapper, props.className)}
diff --git a/app/configurator/interactive-filters/time-slider.tsx b/app/configurator/interactive-filters/time-slider.tsx
index a3b60cada..83e1529ac 100644
--- a/app/configurator/interactive-filters/time-slider.tsx
+++ b/app/configurator/interactive-filters/time-slider.tsx
@@ -34,6 +34,7 @@ import {
   makeDimensionValueSorters,
 } from "@/utils/sorting-values";
 import useEvent from "@/utils/use-event";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 const TimelineContext = createContext<Timeline | undefined>(undefined);
 
@@ -159,6 +160,7 @@ const Root = ({ showPlayButton }: { showPlayButton: boolean }) => {
 
   return (
     <Box
+      {...DISABLE_SCREENSHOT_ATTR}
       sx={{
         display: "flex",
         alignItems: "center",

From 9810604b46accf0c85ef93cd55e3e93ef691fc56 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Wed, 4 Dec 2024 11:27:33 +0100
Subject: [PATCH 14/33] feat: Add better labels

---
 app/components/chart-shared.tsx | 2 +-
 app/locales/de/messages.po      | 4 ++++
 app/locales/en/messages.po      | 4 ++++
 app/locales/fr/messages.po      | 4 ++++
 app/locales/it/messages.po      | 4 ++++
 5 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 3db36251b..78a6b7abc 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -372,7 +372,7 @@ const DownloadImageMenuActionItem = ({
       onClick={screenshot}
       disabled={loading}
       leadingIconName="download"
-      label={type.toUpperCase()}
+      label={`${t({ id: "chart-controls.export", message: "Export" })} ${type.toUpperCase()}`}
     />
   );
 };
diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
index 60d57fc13..a8f92d315 100644
--- a/app/locales/de/messages.po
+++ b/app/locales/de/messages.po
@@ -180,6 +180,10 @@ msgstr "Bearbeiten"
 msgid "chart-controls.edit-tab-label"
 msgstr "Tab-Titel editieren"
 
+#: app/components/chart-shared.tsx
+msgid "chart-controls.export"
+msgstr "Export"
+
 #: app/components/dataset-metadata.tsx
 msgid "chart-controls.sparql-query"
 msgstr "SPARQL-Abfrage"
diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
index 19bffe116..74056298f 100644
--- a/app/locales/en/messages.po
+++ b/app/locales/en/messages.po
@@ -180,6 +180,10 @@ msgstr "Edit"
 msgid "chart-controls.edit-tab-label"
 msgstr "Edit tab label"
 
+#: app/components/chart-shared.tsx
+msgid "chart-controls.export"
+msgstr "Export"
+
 #: app/components/dataset-metadata.tsx
 msgid "chart-controls.sparql-query"
 msgstr "SPARQL query"
diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po
index 7c0ac3b0f..15e57cd85 100644
--- a/app/locales/fr/messages.po
+++ b/app/locales/fr/messages.po
@@ -180,6 +180,10 @@ msgstr "Modifier"
 msgid "chart-controls.edit-tab-label"
 msgstr "Modifier le nom de l'onglet"
 
+#: app/components/chart-shared.tsx
+msgid "chart-controls.export"
+msgstr "Exporter"
+
 #: app/components/dataset-metadata.tsx
 msgid "chart-controls.sparql-query"
 msgstr "Requête SPARQL"
diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po
index 30781c816..1f0e0c63b 100644
--- a/app/locales/it/messages.po
+++ b/app/locales/it/messages.po
@@ -180,6 +180,10 @@ msgstr "Modifica"
 msgid "chart-controls.edit-tab-label"
 msgstr "Modifica l'etichetta della scheda"
 
+#: app/components/chart-shared.tsx
+msgid "chart-controls.export"
+msgstr "Esportare"
+
 #: app/components/dataset-metadata.tsx
 msgid "chart-controls.sparql-query"
 msgstr "SPARQL query"

From 1aacf85f1763ae9c1576c6386d380c60fc6bbfc3 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Wed, 4 Dec 2024 11:27:50 +0100
Subject: [PATCH 15/33] feat: Improve the Accent sync command

---
 package.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/package.json b/package.json
index a20e76f3a..086753d5b 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,7 @@
     "lint": "eslint app -c .eslintrc.json",
     "locales:extract": "NODE_ENV=development lingui extract --clean; ./scripts/strip-locale-line-numbers.sh",
     "locales:compile": "lingui compile --verbose",
-    "locales:push": "dotenv -- accent sync --add-translations; yarn locales:extract # putting back file location comments",
-    "locales:pull": "dotenv -- accent export; yarn locales:extract # putting back file location comments",
-    "locales:sync": "yarn locales:pull && yarn locales:push",
+    "locales:sync": "dotenv -- accent sync --add-translations --merge-type=passive --order-by=key; yarn locales:extract # putting back file location comments",
     "locales:browse": "open 'https://accent.interactivethings.io/app/projects/584e1dfa-ff1f-4b26-8cac-07004c465134'",
     "graphql:codegen": "graphql-codegen --config codegen.yml",
     "graphql:codegen:dev": "graphql-codegen --config codegen.yml --watch",

From 246bf0cfaef5d3e66f49435947004699a00b144f Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Wed, 4 Dec 2024 11:29:19 +0100
Subject: [PATCH 16/33] feat: Remove SVG image export for now

---
 app/components/chart-shared.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 78a6b7abc..8f8e3786e 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -171,11 +171,6 @@ export const ChartMoreButton = ({
                   screenshotName={chartKey}
                   screenshotNode={chartWrapperNode}
                 />
-                <DownloadImageMenuActionItem
-                  type="svg"
-                  screenshotName={chartKey}
-                  screenshotNode={chartWrapperNode}
-                />
               </>
             ) : null}
             {state.layout.type !== "dashboard" && configKey ? (
@@ -214,11 +209,6 @@ export const ChartMoreButton = ({
                   screenshotName={chartKey}
                   screenshotNode={chartWrapperNode}
                 />
-                <DownloadImageMenuActionItem
-                  type="svg"
-                  screenshotName={chartKey}
-                  screenshotNode={chartWrapperNode}
-                />
               </>
             ) : null}
             {state.chartConfigs.length > 1 ? (

From 59e2be34b6ec6971893898eebff1e7e462ff5b54 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Wed, 4 Dec 2024 11:35:08 +0100
Subject: [PATCH 17/33] feat: Make all texts dark-grey in PNGs

---
 app/components/chart-shared.tsx | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 8f8e3786e..b92a60280 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -1,7 +1,20 @@
 import { t, Trans } from "@lingui/macro";
-import { Box, IconButton, Theme, useEventCallback } from "@mui/material";
+import {
+  Box,
+  IconButton,
+  Theme,
+  useEventCallback,
+  useTheme,
+} from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { ComponentProps, useEffect, useState } from "react";
+import { select } from "d3-selection";
+import {
+  ComponentProps,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
 import {
   ChartDataFiltersList,
@@ -125,6 +138,7 @@ export const ChartMoreButton = ({
   chartKey: string;
   chartWrapperNode?: HTMLElement | null;
 }) => {
+  const theme = useTheme();
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
   const [anchor, setAnchor] = useState<HTMLElement | null>(null);
   const handleClose = useEventCallback(() => setAnchor(null));
@@ -141,6 +155,19 @@ export const ChartMoreButton = ({
     state.layout.type === "dashboard" &&
     chartConfig.chartType === "table";
 
+  const modifyNode = useCallback(
+    (node: HTMLElement) => {
+      // Every text element should be dark-grey (currently we use primary.main to
+      // indicate interactive elements, which doesn't make sense for screenshots).
+      const color = theme.palette.grey[700];
+      select(node).selectAll("*").style("color", color);
+      // SVG elements have fill instead of color. Here we only target text elements,
+      // to avoid changing the color of other SVG elements (charts).
+      select(node).selectAll("text").style("fill", color);
+    },
+    [theme.palette.grey]
+  );
+
   return disableButton ? null : (
     <>
       <IconButton
@@ -170,6 +197,7 @@ export const ChartMoreButton = ({
                   type="png"
                   screenshotName={chartKey}
                   screenshotNode={chartWrapperNode}
+                  modifyNode={modifyNode}
                 />
               </>
             ) : null}
@@ -208,6 +236,7 @@ export const ChartMoreButton = ({
                   type="png"
                   screenshotName={chartKey}
                   screenshotNode={chartWrapperNode}
+                  modifyNode={modifyNode}
                 />
               </>
             ) : null}

From af033963ed39f35d5ee3934f4ea1e48a92697746 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Wed, 4 Dec 2024 13:20:05 +0100
Subject: [PATCH 18/33] refactor: Pass createdWith to VisualizeLink

...in order so we don't have to use i18n provider when making a screenshot.
---
 app/components/chart-footnotes.tsx | 9 ++++++---
 app/components/chart-published.tsx | 8 ++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
index 4b65c81e7..d2df08c74 100644
--- a/app/components/chart-footnotes.tsx
+++ b/app/components/chart-footnotes.tsx
@@ -107,7 +107,9 @@ export const ChartFootnotes = ({
           ) : null}
         </div>
       ))}
-      {showVisualizeLink ? <VisualizeLink /> : null}
+      {showVisualizeLink ? (
+        <VisualizeLink createdWith={t({ id: "metadata.link.created.with" })} />
+      ) : null}
     </Box>
   );
 };
@@ -281,11 +283,12 @@ const ChartFootnotesComboLineSingle = ({
   ) : null;
 };
 
-export const VisualizeLink = () => {
+export const VisualizeLink = ({ createdWith }: { createdWith: ReactNode }) => {
   const locale = useLocale();
+
   return (
     <Typography variant="caption" color="grey.600">
-      <Trans id="metadata.link.created.with">Created with</Trans>
+      {createdWith}
       <Link
         href={`https://visualize.admin.ch/${locale}/`}
         target="_blank"
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 611762d2a..e02983ec1 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -27,8 +27,8 @@ import { DashboardInteractiveFilters } from "@/components/dashboard-interactive-
 import Flex from "@/components/flex";
 import { HintBlue, HintRed, HintYellow } from "@/components/hint";
 import {
-  MetadataPanelStoreContext,
   createMetadataPanelStore,
+  MetadataPanelStoreContext,
 } from "@/components/metadata-panel-store";
 import {
   ChartConfig,
@@ -155,7 +155,11 @@ export const ChartPublished = ({
                 chartConfigs={state.chartConfigs}
                 renderChart={renderChart}
               />
-              {state.chartConfigs.length !== 1 && <VisualizeLink />}
+              {state.chartConfigs.length !== 1 && (
+                <VisualizeLink
+                  createdWith={t({ id: "metadata.link.created.with" })}
+                />
+              )}
             </Box>
           ) : (
             <>

From d6ad38a65652a961b1bbd86203e5bc7152a5c9f0 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Wed, 4 Dec 2024 14:02:58 +0100
Subject: [PATCH 19/33] feat: Add Created with Visualize link to screenshot
 footnotes

---
 app/components/chart-footnotes.tsx | 11 +++++++---
 app/components/chart-published.tsx |  2 +-
 app/components/chart-shared.tsx    | 33 ++++++++++++++++++++++--------
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
index d2df08c74..536492604 100644
--- a/app/components/chart-footnotes.tsx
+++ b/app/components/chart-footnotes.tsx
@@ -1,8 +1,8 @@
-import { Trans } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { Box, Link, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import uniqBy from "lodash/uniqBy";
-import { useMemo } from "react";
+import { ReactNode, useMemo } from "react";
 
 import { extractChartConfigUsedCubes } from "@/charts/shared/chart-helpers";
 import { LegendItem } from "@/charts/shared/legend-color";
@@ -41,6 +41,8 @@ export const useFootnotesStyles = makeStyles<Theme, { useMarginTop: boolean }>(
   })
 );
 
+export const CHART_FOOTNOTES_CLASS_NAME = "chart-footnotes";
+
 export const ChartFootnotes = ({
   dataSource,
   chartConfig,
@@ -73,7 +75,10 @@ export const ChartFootnotes = ({
   const formatLocale = useTimeFormatLocale();
 
   return (
-    <Box sx={{ mt: 1, "& > :not(:last-child)": { mb: 3 } }}>
+    <Box
+      className={CHART_FOOTNOTES_CLASS_NAME}
+      sx={{ mt: 1, "& > :not(:last-child)": { mb: 3 } }}
+    >
       {data?.dataCubesMetadata.map((metadata) => (
         <div key={metadata.iri}>
           <ChartFootnotesLegend
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index e02983ec1..090ee6199 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -1,4 +1,4 @@
-import { Trans } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { Box, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index b92a60280..50fd13d66 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -8,13 +8,8 @@ import {
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { select } from "d3-selection";
-import {
-  ComponentProps,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { ComponentProps, useCallback, useEffect, useState } from "react";
+import ReactDOM from "react-dom";
 
 import {
   ChartDataFiltersList,
@@ -22,6 +17,10 @@ import {
   useChartDataFiltersState,
 } from "@/charts/shared/chart-data-filters";
 import { ArrowMenuTopBottom } from "@/components/arrow-menu";
+import {
+  CHART_FOOTNOTES_CLASS_NAME,
+  VisualizeLink,
+} from "@/components/chart-footnotes";
 import { chartPanelLayoutGridClasses } from "@/components/chart-panel-layout-grid";
 import { useChartTablePreview } from "@/components/chart-table-preview";
 import { MenuActionItem } from "@/components/menu-action-item";
@@ -157,10 +156,26 @@ export const ChartMoreButton = ({
 
   const modifyNode = useCallback(
     (node: HTMLElement) => {
+      const footnotes = node.querySelector(`.${CHART_FOOTNOTES_CLASS_NAME}`);
+
+      if (footnotes) {
+        const container = footnotes.appendChild(document.createElement("div"));
+        ReactDOM.render(
+          <VisualizeLink
+            createdWith={t({ id: "metadata.link.created.with" })}
+          />,
+          container
+        );
+      }
+
       // Every text element should be dark-grey (currently we use primary.main to
-      // indicate interactive elements, which doesn't make sense for screenshots).
+      // indicate interactive elements, which doesn't make sense for screenshots)
+      // and not have underlines.
       const color = theme.palette.grey[700];
-      select(node).selectAll("*").style("color", color);
+      select(node)
+        .selectAll("*")
+        .style("color", color)
+        .style("text-decoration", "none");
       // SVG elements have fill instead of color. Here we only target text elements,
       // to avoid changing the color of other SVG elements (charts).
       select(node).selectAll("text").style("fill", color);

From 7571dc9f02c801e16737004940a06bec4e145e85 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 10:48:30 +0100
Subject: [PATCH 20/33] chore: Update react-table types

---
 app/package.json |   2 +-
 yarn.lock        | 185 +++++++++++++++++++++--------------------------
 2 files changed, 84 insertions(+), 103 deletions(-)

diff --git a/app/package.json b/app/package.json
index 65e2ef6a1..150cbaba4 100644
--- a/app/package.json
+++ b/app/package.json
@@ -175,7 +175,7 @@
     "@types/rdfjs__data-model": "2.0.7",
     "@types/rdfjs__namespace": "^2.0.10",
     "@types/react-beautiful-dnd": "^13.1.4",
-    "@types/react-table": "^7.7.15",
+    "@types/react-table": "^7.7.20",
     "@types/react-window": "^1.8.2",
     "@types/sparql-http-client": "^2.2.5",
     "@types/topojson-client": "^3.1.0",
diff --git a/yarn.lock b/yarn.lock
index c7d8512ff..8d43d8c4c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -230,29 +230,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.2.tgz#278b6b13664557de95b8f35b90d96785850bb56e"
   integrity sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==
 
-"@babel/core@7.12.9":
-  version "7.12.9"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
-  integrity sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/generator" "^7.12.5"
-    "@babel/helper-module-transforms" "^7.12.1"
-    "@babel/helpers" "^7.12.5"
-    "@babel/parser" "^7.12.7"
-    "@babel/template" "^7.12.7"
-    "@babel/traverse" "^7.12.9"
-    "@babel/types" "^7.12.7"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
-    json5 "^2.1.2"
-    lodash "^4.17.19"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
-"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.18.9", "@babel/core@^7.21.0", "@babel/core@^7.23.0", "@babel/core@^7.23.2", "@babel/core@^7.24.4", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
+"@babel/core@7.12.9", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.14.6", "@babel/core@^7.18.9", "@babel/core@^7.21.0", "@babel/core@^7.23.0", "@babel/core@^7.23.2", "@babel/core@^7.24.4", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.0.tgz#d78b6023cc8f3114ccf049eb219613f74a747b40"
   integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
@@ -282,17 +260,6 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.12.5", "@babel/generator@^7.25.9", "@babel/generator@^7.26.0":
-  version "7.26.2"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f"
-  integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==
-  dependencies:
-    "@babel/parser" "^7.26.2"
-    "@babel/types" "^7.26.0"
-    "@jridgewell/gen-mapping" "^0.3.5"
-    "@jridgewell/trace-mapping" "^0.3.25"
-    jsesc "^3.0.2"
-
 "@babel/generator@^7.20.14":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
@@ -323,6 +290,17 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.25.9", "@babel/generator@^7.26.0":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f"
+  integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==
+  dependencies:
+    "@babel/parser" "^7.26.2"
+    "@babel/types" "^7.26.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
 "@babel/helper-annotate-as-pure@^7.14.5":
   version "7.14.5"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz"
@@ -560,15 +538,6 @@
     "@babel/traverse" "^7.25.9"
     "@babel/types" "^7.25.9"
 
-"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.26.0":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
-  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.25.9"
-    "@babel/helper-validator-identifier" "^7.25.9"
-    "@babel/traverse" "^7.25.9"
-
 "@babel/helper-module-transforms@^7.14.5":
   version "7.15.8"
   resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz"
@@ -594,6 +563,15 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     "@babel/helper-validator-identifier" "^7.22.20"
 
+"@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
 "@babel/helper-optimise-call-expression@^7.14.5", "@babel/helper-optimise-call-expression@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz"
@@ -808,7 +786,7 @@
     "@babel/template" "^7.22.15"
     "@babel/types" "^7.22.19"
 
-"@babel/helpers@^7.12.5", "@babel/helpers@^7.26.0":
+"@babel/helpers@^7.26.0":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.0.tgz#30e621f1eba5aa45fe6f4868d2e9154d884119a4"
   integrity sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==
@@ -862,17 +840,12 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@7.12.16":
-  version "7.12.16"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.16.tgz#cc31257419d2c3189d394081635703f549fc1ed4"
-  integrity sha512-c/+u9cqV6F0+4Hpq01jnJO+GLp2DdT63ppz9Xa+6cHaajM9VFzK/iDXiKK65YtpeVwu+ctfS6iqlMqRgQRzeCw==
-
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.20.15", "@babel/parser@^7.20.7", "@babel/parser@^7.21.2", "@babel/parser@^7.21.4", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.24.0", "@babel/parser@^7.24.4", "@babel/parser@^7.24.5", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2", "@babel/parser@^7.7.2":
-  version "7.26.2"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11"
-  integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==
+"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.20.15", "@babel/parser@^7.20.7", "@babel/parser@^7.21.2", "@babel/parser@^7.21.4", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.24.0", "@babel/parser@^7.24.4", "@babel/parser@^7.24.5", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2", "@babel/parser@^7.7.2":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.3.tgz#8c51c5db6ddf08134af1ddbacf16aaab48bac234"
+  integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
   dependencies:
-    "@babel/types" "^7.26.0"
+    "@babel/types" "^7.26.3"
 
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.5":
   version "7.24.5"
@@ -2527,15 +2500,6 @@
   resolved "https://registry.npmjs.org/@babel/standalone/-/standalone-7.14.6.tgz"
   integrity sha512-oAoSp82jhJFnXKybKTOj5QF04XxiDRyiiqrFToiU1udlBXuZoADlPmmnOcuqBrZxSNNUjzJIVK8vt838Qoqjxg==
 
-"@babel/template@^7.12.7", "@babel/template@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
-  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
-  dependencies:
-    "@babel/code-frame" "^7.25.9"
-    "@babel/parser" "^7.25.9"
-    "@babel/types" "^7.25.9"
-
 "@babel/template@^7.15.4", "@babel/template@^7.3.3":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz"
@@ -2563,6 +2527,15 @@
     "@babel/parser" "^7.24.0"
     "@babel/types" "^7.24.0"
 
+"@babel/template@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
+  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
 "@babel/traverse@7.12.13":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz"
@@ -2593,19 +2566,6 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.12.9", "@babel/traverse@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
-  integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
-  dependencies:
-    "@babel/code-frame" "^7.25.9"
-    "@babel/generator" "^7.25.9"
-    "@babel/parser" "^7.25.9"
-    "@babel/template" "^7.25.9"
-    "@babel/types" "^7.25.9"
-    debug "^4.3.1"
-    globals "^11.1.0"
-
 "@babel/traverse@^7.18.9", "@babel/traverse@^7.23.2":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.0.tgz#4a408fbf364ff73135c714a2ab46a5eab2831b1e"
@@ -2638,6 +2598,19 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
+"@babel/traverse@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
+  integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/generator" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.25.9"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/types@7.12.13":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz"
@@ -2655,14 +2628,6 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.12.7", "@babel/types@^7.25.9", "@babel/types@^7.26.0":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
-  integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==
-  dependencies:
-    "@babel/helper-string-parser" "^7.25.9"
-    "@babel/helper-validator-identifier" "^7.25.9"
-
 "@babel/types@^7.16.7":
   version "7.17.0"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz"
@@ -2725,6 +2690,22 @@
     "@babel/helper-validator-identifier" "^7.24.5"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.25.9", "@babel/types@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
+  integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@babel/types@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0"
+  integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -9589,9 +9570,9 @@
     "@types/react" "*"
 
 "@types/react-dom@^17.0.2":
-  version "17.0.20"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.20.tgz#e0c8901469d732b36d8473b40b679ad899da1b53"
-  integrity sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==
+  version "17.0.25"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.25.tgz#e0e5b3571e1069625b3a3da2b279379aa33a0cb5"
+  integrity sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==
   dependencies:
     "@types/react" "^17"
 
@@ -9626,10 +9607,10 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-table@^7.7.15":
-  version "7.7.15"
-  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.15.tgz#e9a093a5f2be4fff5ccb41f1aec9516b520ed9b3"
-  integrity sha512-tlXKCeq4gk2xT2lB+Hbp/dO5yYZ899HwQOAp/3o3hKw8wp7ngNpdB90BNWE6kWCm5K2KzmEsHnYoJheSS5SVjg==
+"@types/react-table@^7.7.20":
+  version "7.7.20"
+  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.20.tgz#2f68e70ca7a703ad8011a8da55c38482f0eb4314"
+  integrity sha512-ahMp4pmjVlnExxNwxyaDrFgmKxSbPwU23sGQw2gJK4EhCvnvmib2s/O/+y1dfV57dXOwpr2plfyBol+vEHbi2w==
   dependencies:
     "@types/react" "*"
 
@@ -9665,12 +9646,12 @@
     csstype "^3.0.2"
 
 "@types/react@^17", "@types/react@^17.0.2":
-  version "17.0.65"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.65.tgz#95f6a2ab61145ffb69129d07982d047f9e0870cd"
-  integrity sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==
+  version "17.0.83"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.83.tgz#b477c56387b74279281149dcf5ba2a1e2216d131"
+  integrity sha512-l0m4ArKJvmFtR4e8UmKrj1pB4tUgOhJITf+mADyF/p69Ts1YAR/E+G9XEM0mHXKVRa1dQNHseyyDNzeuAXfXQw==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
+    "@types/scheduler" "^0.16"
     csstype "^3.0.2"
 
 "@types/readable-stream@^2.3.13":
@@ -9698,6 +9679,11 @@
   resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz"
   integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
 
+"@types/scheduler@^0.16":
+  version "0.16.8"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
+  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
+
 "@types/semver@^7.3.12", "@types/semver@^7.3.4", "@types/semver@^7.5.0":
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
@@ -15668,7 +15654,7 @@ fwd-stream@^1.0.4:
   dependencies:
     readable-stream "~1.0.26-4"
 
-gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
+gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
@@ -22365,7 +22351,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz"
   integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@1.22.8, resolve@^1.14.2, resolve@^1.22.8, resolve@^1.3.2:
+resolve@1.22.8, resolve@^1.14.2, resolve@^1.22.8:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -22713,11 +22699,6 @@ semver@7.x, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^5.4.1:
-  version "5.7.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
-  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
-
 semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"

From cd3eb7c8cf09833be0db55bc84d3f913a1783a8a Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 10:49:56 +0100
Subject: [PATCH 21/33] fix: Use React 18's createRoot to render additional
 screenshot elements

...as we use some old libraries that weren't updated to support React 18's new FC definition, we need to have a custom declaration file for react-dom/client.
---
 app/components/chart-shared.tsx | 15 +++++++++------
 app/typings/react-dom.d.ts      |  5 +++++
 2 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 app/typings/react-dom.d.ts

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 50fd13d66..731d411a3 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -9,7 +9,7 @@ import {
 import { makeStyles } from "@mui/styles";
 import { select } from "d3-selection";
 import { ComponentProps, useCallback, useEffect, useState } from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 import {
   ChartDataFiltersList,
@@ -155,17 +155,20 @@ export const ChartMoreButton = ({
     chartConfig.chartType === "table";
 
   const modifyNode = useCallback(
-    (node: HTMLElement) => {
+    async (node: HTMLElement) => {
       const footnotes = node.querySelector(`.${CHART_FOOTNOTES_CLASS_NAME}`);
 
       if (footnotes) {
-        const container = footnotes.appendChild(document.createElement("div"));
-        ReactDOM.render(
+        const container = document.createElement("div");
+        footnotes.appendChild(container);
+        const root = createRoot(container);
+        root.render(
           <VisualizeLink
             createdWith={t({ id: "metadata.link.created.with" })}
-          />,
-          container
+          />
         );
+        // Wait for the component to render before taking the screenshot.
+        await new Promise((resolve) => setTimeout(resolve, 0));
       }
 
       // Every text element should be dark-grey (currently we use primary.main to
diff --git a/app/typings/react-dom.d.ts b/app/typings/react-dom.d.ts
new file mode 100644
index 000000000..6d35a29cc
--- /dev/null
+++ b/app/typings/react-dom.d.ts
@@ -0,0 +1,5 @@
+declare module "react-dom/client" {
+  export function createRoot(container: Element): {
+    render(element: JSX.Element): void;
+  };
+}

From e65ec3051510906fa8bfbbc716592d0f0098e948 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 11:07:34 +0100
Subject: [PATCH 22/33] refactor: Move modifyNode closer to useScreenshot

---
 app/components/chart-shared.tsx | 70 ++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 37 deletions(-)

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 731d411a3..cd55e2123 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -137,7 +137,6 @@ export const ChartMoreButton = ({
   chartKey: string;
   chartWrapperNode?: HTMLElement | null;
 }) => {
-  const theme = useTheme();
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
   const [anchor, setAnchor] = useState<HTMLElement | null>(null);
   const handleClose = useEventCallback(() => setAnchor(null));
@@ -154,38 +153,6 @@ export const ChartMoreButton = ({
     state.layout.type === "dashboard" &&
     chartConfig.chartType === "table";
 
-  const modifyNode = useCallback(
-    async (node: HTMLElement) => {
-      const footnotes = node.querySelector(`.${CHART_FOOTNOTES_CLASS_NAME}`);
-
-      if (footnotes) {
-        const container = document.createElement("div");
-        footnotes.appendChild(container);
-        const root = createRoot(container);
-        root.render(
-          <VisualizeLink
-            createdWith={t({ id: "metadata.link.created.with" })}
-          />
-        );
-        // Wait for the component to render before taking the screenshot.
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      }
-
-      // Every text element should be dark-grey (currently we use primary.main to
-      // indicate interactive elements, which doesn't make sense for screenshots)
-      // and not have underlines.
-      const color = theme.palette.grey[700];
-      select(node)
-        .selectAll("*")
-        .style("color", color)
-        .style("text-decoration", "none");
-      // SVG elements have fill instead of color. Here we only target text elements,
-      // to avoid changing the color of other SVG elements (charts).
-      select(node).selectAll("text").style("fill", color);
-    },
-    [theme.palette.grey]
-  );
-
   return disableButton ? null : (
     <>
       <IconButton
@@ -215,7 +182,6 @@ export const ChartMoreButton = ({
                   type="png"
                   screenshotName={chartKey}
                   screenshotNode={chartWrapperNode}
-                  modifyNode={modifyNode}
                 />
               </>
             ) : null}
@@ -254,7 +220,6 @@ export const ChartMoreButton = ({
                   type="png"
                   screenshotName={chartKey}
                   screenshotNode={chartWrapperNode}
-                  modifyNode={modifyNode}
                 />
               </>
             ) : null}
@@ -391,9 +356,40 @@ const DownloadImageMenuActionItem = ({
   type,
   screenshotName,
   screenshotNode,
-  modifyNode,
   pngMetadata,
-}: UseScreenshotProps) => {
+}: Omit<UseScreenshotProps, "modifyNode">) => {
+  const theme = useTheme();
+  const modifyNode = useCallback(
+    async (node: HTMLElement) => {
+      const footnotes = node.querySelector(`.${CHART_FOOTNOTES_CLASS_NAME}`);
+
+      if (footnotes) {
+        const container = document.createElement("div");
+        footnotes.appendChild(container);
+        const root = createRoot(container);
+        root.render(
+          <VisualizeLink
+            createdWith={t({ id: "metadata.link.created.with" })}
+          />
+        );
+        // Wait for the component to render before taking the screenshot.
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+
+      // Every text element should be dark-grey (currently we use primary.main to
+      // indicate interactive elements, which doesn't make sense for screenshots)
+      // and not have underlines.
+      const color = theme.palette.grey[700];
+      select(node)
+        .selectAll("*")
+        .style("color", color)
+        .style("text-decoration", "none");
+      // SVG elements have fill instead of color. Here we only target text elements,
+      // to avoid changing the color of other SVG elements (charts).
+      select(node).selectAll("text").style("fill", color);
+    },
+    [theme.palette.grey]
+  );
   const { loading, screenshot } = useScreenshot({
     type,
     screenshotName,

From d38201cafb4fc727c4481aca80a05b630e4f1b46 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 11:23:47 +0100
Subject: [PATCH 23/33] feat: Use better names for downloaded images

---
 app/components/chart-shared.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index cd55e2123..06e191a6d 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -35,6 +35,7 @@ import {
   isPublished,
   useConfiguratorState,
 } from "@/configurator";
+import { timeUnitToFormatter } from "@/configurator/components/ui-helpers";
 import { getChartIcon } from "@/icons";
 import SvgIcMore from "@/icons/components/IcMore";
 import { useLocale } from "@/src";
@@ -137,6 +138,7 @@ export const ChartMoreButton = ({
   chartKey: string;
   chartWrapperNode?: HTMLElement | null;
 }) => {
+  const locale = useLocale();
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
   const [anchor, setAnchor] = useState<HTMLElement | null>(null);
   const handleClose = useEventCallback(() => setAnchor(null));
@@ -153,6 +155,12 @@ export const ChartMoreButton = ({
     state.layout.type === "dashboard" &&
     chartConfig.chartType === "table";
 
+  const screenshotName = useMemo(() => {
+    const date = timeUnitToFormatter.Day(new Date());
+    const label = chartConfig.meta.title[locale] || chartConfig.chartType;
+    return `${date}_${label}`;
+  }, [chartConfig.meta.title, chartConfig.chartType, locale]);
+
   return disableButton ? null : (
     <>
       <IconButton
@@ -180,7 +188,7 @@ export const ChartMoreButton = ({
                 />
                 <DownloadImageMenuActionItem
                   type="png"
-                  screenshotName={chartKey}
+                  screenshotName={screenshotName}
                   screenshotNode={chartWrapperNode}
                 />
               </>
@@ -218,7 +226,7 @@ export const ChartMoreButton = ({
                 />
                 <DownloadImageMenuActionItem
                   type="png"
-                  screenshotName={chartKey}
+                  screenshotName={screenshotName}
                   screenshotNode={chartWrapperNode}
                 />
               </>

From 506de01aaaed6f4dc6e88bc399d2b714b2bfebe7 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 11:38:25 +0100
Subject: [PATCH 24/33] feat: Add file metadata to downloaded PNG images

---
 app/components/chart-preview.tsx   |   1 +
 app/components/chart-published.tsx |   1 +
 app/components/chart-shared.tsx    | 110 +++++++++++++++++++++++++----
 3 files changed, 100 insertions(+), 12 deletions(-)

diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index b5d3b2f24..8ef945fe4 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -504,6 +504,7 @@ const ChartPreviewInner = ({
                     <ChartMoreButton
                       chartKey={chartConfig.key}
                       chartWrapperNode={ref.current}
+                      components={allComponents}
                     />
                     {actionElementSlot}
                   </Box>
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 090ee6199..2c5a94412 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -397,6 +397,7 @@ const ChartPublishedInnerImpl = (props: ChartPublishInnerProps) => {
                   configKey={configKey}
                   chartKey={chartConfig.key}
                   chartWrapperNode={rootRef.current}
+                  components={allComponents}
                 />
               </Box>
             </Flex>
diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 06e191a6d..72b0ce741 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -8,7 +8,14 @@ import {
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { select } from "d3-selection";
-import { ComponentProps, useCallback, useEffect, useState } from "react";
+import uniqBy from "lodash/uniqBy";
+import {
+  ComponentProps,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { createRoot } from "react-dom/client";
 
 import {
@@ -16,6 +23,7 @@ import {
   ChartDataFiltersToggle,
   useChartDataFiltersState,
 } from "@/charts/shared/chart-data-filters";
+import { extractChartConfigUsedCubes } from "@/charts/shared/chart-helpers";
 import { ArrowMenuTopBottom } from "@/components/arrow-menu";
 import {
   CHART_FOOTNOTES_CLASS_NAME,
@@ -36,6 +44,9 @@ import {
   useConfiguratorState,
 } from "@/configurator";
 import { timeUnitToFormatter } from "@/configurator/components/ui-helpers";
+import { Component } from "@/domain/data";
+import { truthy } from "@/domain/types";
+import { useDataCubesMetadataQuery } from "@/graphql/hooks";
 import { getChartIcon } from "@/icons";
 import SvgIcMore from "@/icons/components/IcMore";
 import { useLocale } from "@/src";
@@ -133,10 +144,12 @@ export const ChartMoreButton = ({
   configKey,
   chartKey,
   chartWrapperNode,
+  components,
 }: {
   configKey?: string;
   chartKey: string;
   chartWrapperNode?: HTMLElement | null;
+  components: Component[];
 }) => {
   const locale = useLocale();
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
@@ -186,8 +199,10 @@ export const ChartMoreButton = ({
                   chartType={chartConfig.chartType}
                   onSuccess={handleClose}
                 />
-                <DownloadImageMenuActionItem
-                  type="png"
+                <DownloadPNGImageMenuActionItem
+                  configKey={configKey}
+                  chartKey={chartKey}
+                  components={components}
                   screenshotName={screenshotName}
                   screenshotNode={chartWrapperNode}
                 />
@@ -224,8 +239,10 @@ export const ChartMoreButton = ({
                   chartType={chartConfig.chartType}
                   onSuccess={handleClose}
                 />
-                <DownloadImageMenuActionItem
-                  type="png"
+                <DownloadPNGImageMenuActionItem
+                  configKey={configKey}
+                  chartKey={chartKey}
+                  components={components}
                   screenshotName={screenshotName}
                   screenshotNode={chartWrapperNode}
                 />
@@ -271,6 +288,7 @@ const CopyChartMenuActionItem = ({ configKey }: { configKey: string }) => {
       `${window.location.origin}/${locale}/create/new?copy=${configKey}`
     );
   }, [configKey, locale]);
+
   return (
     <MenuActionItem
       type="link"
@@ -290,6 +308,7 @@ const ShareChartMenuActionItem = ({ configKey }: { configKey: string }) => {
   useEffect(() => {
     setShareUrl(`${window.location.origin}/${locale}/v/${configKey}`);
   }, [configKey, locale]);
+
   return (
     <MenuActionItem
       type="link"
@@ -312,6 +331,7 @@ export const DuplicateChartMenuActionItem = ({
 }) => {
   const locale = useLocale();
   const [_, dispatch] = useConfiguratorState(hasChartConfigs);
+
   return (
     <MenuActionItem
       type="button"
@@ -340,6 +360,7 @@ const TableViewChartMenuActionItem = ({
   onSuccess: () => void;
 }) => {
   const { isTable, setIsTable } = useChartTablePreview();
+
   return (
     <MenuActionItem
       type="button"
@@ -360,12 +381,17 @@ const TableViewChartMenuActionItem = ({
   );
 };
 
-const DownloadImageMenuActionItem = ({
-  type,
+const DownloadPNGImageMenuActionItem = ({
+  configKey,
+  chartKey,
+  components,
   screenshotName,
   screenshotNode,
-  pngMetadata,
-}: Omit<UseScreenshotProps, "modifyNode">) => {
+}: {
+  configKey?: string;
+  chartKey: string;
+  components: Component[];
+} & Omit<UseScreenshotProps, "type" | "modifyNode" | "pngMetadata">) => {
   const theme = useTheme();
   const modifyNode = useCallback(
     async (node: HTMLElement) => {
@@ -398,12 +424,13 @@ const DownloadImageMenuActionItem = ({
     },
     [theme.palette.grey]
   );
+  const metadata = usePNGMetadata({ configKey, chartKey, components });
   const { loading, screenshot } = useScreenshot({
-    type,
+    type: "png",
     screenshotName,
     screenshotNode,
     modifyNode,
-    pngMetadata,
+    pngMetadata: metadata,
   });
 
   return (
@@ -413,7 +440,66 @@ const DownloadImageMenuActionItem = ({
       onClick={screenshot}
       disabled={loading}
       leadingIconName="download"
-      label={`${t({ id: "chart-controls.export", message: "Export" })} ${type.toUpperCase()}`}
+      label={`${t({ id: "chart-controls.export", message: "Export" })} PNG`}
     />
   );
 };
+
+const usePNGMetadata = ({
+  chartKey,
+  configKey,
+  components,
+}: {
+  chartKey: string;
+  configKey?: string;
+  components: Component[];
+}): UseScreenshotProps["pngMetadata"] => {
+  const locale = useLocale();
+  const [state] = useConfiguratorState(hasChartConfigs);
+  const chartConfig = getChartConfig(state, chartKey);
+
+  const usedComponents = useMemo(() => {
+    return extractChartConfigUsedCubes(chartConfig, { components });
+  }, [chartConfig, components]);
+
+  const [{ data }] = useDataCubesMetadataQuery({
+    variables: {
+      sourceType: state.dataSource.type,
+      sourceUrl: state.dataSource.url,
+      locale,
+      cubeFilters: uniqBy(
+        usedComponents.map((component) => ({ iri: component.cubeIri })),
+        "iri"
+      ),
+    },
+    pause: !usedComponents.length,
+  });
+
+  return useMemo(() => {
+    const publisher = data?.dataCubesMetadata
+      .map((cube) => cube.publisher)
+      .join(", ");
+    const publisherMetadata = publisher
+      ? { key: "Publisher", value: publisher }
+      : null;
+    const publishURL = configKey
+      ? `${window.location.origin}/${locale}/v/${configKey}`
+      : null;
+    const publishURLMetadata = publishURL
+      ? { key: "Publish URL", value: publishURL }
+      : null;
+    const datasets = data?.dataCubesMetadata
+      .map((cube) => `${cube.title} ${cube.version ? `(${cube.version})` : ""}`)
+      .join(", ");
+    const datasetsMetadata = datasets
+      ? { key: "Dataset", value: datasets }
+      : null;
+
+    const metadata = [publisherMetadata, publishURLMetadata, datasetsMetadata]
+      .filter(truthy)
+      .map(({ key, value }) => `${key}: ${value}`)
+      .join(" | ");
+
+    return metadata ? [{ key: "Comment", value: metadata }] : [];
+  }, [configKey, data?.dataCubesMetadata, locale]);
+};

From 75fd1fb80c7aeb6341cf3099db8e1523a0f6439a Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 12:28:23 +0100
Subject: [PATCH 25/33] fix: Remove diacritics

---
 app/components/chart-shared.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 72b0ce741..471d34937 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -8,6 +8,7 @@ import {
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { select } from "d3-selection";
+import deburr from "lodash/deburr";
 import uniqBy from "lodash/uniqBy";
 import {
   ComponentProps,
@@ -500,6 +501,6 @@ const usePNGMetadata = ({
       .map(({ key, value }) => `${key}: ${value}`)
       .join(" | ");
 
-    return metadata ? [{ key: "Comment", value: metadata }] : [];
+    return metadata ? [{ key: "Comment", value: deburr(metadata) }] : [];
   }, [configKey, data?.dataCubesMetadata, locale]);
 };

From b1cc7fc444a6694ef89610bd718a3254eb33cd26 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 12:28:34 +0100
Subject: [PATCH 26/33] feat: Improve publisher definition

---
 app/components/chart-shared.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 471d34937..400454634 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -478,7 +478,11 @@ const usePNGMetadata = ({
 
   return useMemo(() => {
     const publisher = data?.dataCubesMetadata
-      .map((cube) => cube.publisher)
+      .map((cube) =>
+        cube.contactPoint
+          ? `${cube.contactPoint.name} (${cube.contactPoint.email})`
+          : cube.creator?.label ?? cube.publisher
+      )
       .join(", ");
     const publisherMetadata = publisher
       ? { key: "Publisher", value: publisher }

From d6e9c4978ce4ea124f0e515059f3ab6581b5b67c Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 14:03:57 +0100
Subject: [PATCH 27/33] refactor: Extract TablePreviewWrapper

---
 app/components/chart-preview.tsx       | 15 ++++-----------
 app/components/chart-published.tsx     | 17 ++++-------------
 app/components/chart-table-preview.tsx | 21 +++++++++++++++++++++
 3 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 8ef945fe4..6e7082bc7 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -36,6 +36,7 @@ import {
 } from "@/components/chart-shared";
 import {
   ChartTablePreviewProvider,
+  TablePreviewWrapper,
   useChartTablePreview,
 } from "@/components/chart-table-preview";
 import { ChartWithFilters } from "@/components/chart-with-filters";
@@ -430,7 +431,7 @@ const ChartPreviewInner = ({
       })),
     },
   });
-  const { isTable, containerRef, containerHeight } = useChartTablePreview();
+  const { isTable } = useChartTablePreview();
   const dimensions = components?.dataCubesComponents.dimensions;
   const measures = components?.dataCubesComponents.measures;
   const allComponents = useMemo(() => {
@@ -559,15 +560,7 @@ const ChartPreviewInner = ({
                     top: BANNER_MARGIN_TOP,
                   }}
                 />
-                <div
-                  ref={containerRef}
-                  style={{
-                    minWidth: 0,
-                    height: containerHeight,
-                    paddingTop: 16,
-                    flexGrow: 1,
-                  }}
-                >
+                <TablePreviewWrapper>
                   {isTable ? (
                     <DataSetTable
                       dataSource={dataSource}
@@ -583,7 +576,7 @@ const ChartPreviewInner = ({
                       dashboardFilters={state.dashboardFilters}
                     />
                   )}
-                </div>
+                </TablePreviewWrapper>
                 <ChartFootnotes
                   dataSource={dataSource}
                   chartConfig={chartConfig}
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 2c5a94412..5702645dd 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -20,6 +20,7 @@ import {
 } from "@/components/chart-shared";
 import {
   ChartTablePreviewProvider,
+  TablePreviewWrapper,
   useChartTablePreview,
 } from "@/components/chart-table-preview";
 import { ChartWithFilters } from "@/components/chart-with-filters";
@@ -256,8 +257,7 @@ const ChartPublishedInnerImpl = (props: ChartPublishInnerProps) => {
   } = props;
   const { meta } = chartConfig;
   const rootRef = useRef<HTMLDivElement>(null);
-  const { isTable, containerRef, containerHeight, computeContainerHeight } =
-    useChartTablePreview();
+  const { isTable, computeContainerHeight } = useChartTablePreview();
   const metadataPanelOpen = useStore(metadataPanelStore, (state) => state.open);
   const shouldShrink = useMemo(() => {
     const rootWidth = rootRef.current?.getBoundingClientRect().width;
@@ -421,16 +421,7 @@ const ChartPublishedInnerImpl = (props: ChartPublishInnerProps) => {
                 allowMultipleOpen: true,
               }}
             />
-
-            <div
-              ref={containerRef}
-              style={{
-                minWidth: 0,
-                height: containerHeight,
-                marginTop: 16,
-                flexGrow: 1,
-              }}
-            >
+            <TablePreviewWrapper>
               {isTable ? (
                 <DataSetTable
                   dataSource={dataSource}
@@ -446,7 +437,7 @@ const ChartPublishedInnerImpl = (props: ChartPublishInnerProps) => {
                   dashboardFilters={state.dashboardFilters}
                 />
               )}
-            </div>
+            </TablePreviewWrapper>
             <ChartFootnotes
               dataSource={dataSource}
               chartConfig={chartConfig}
diff --git a/app/components/chart-table-preview.tsx b/app/components/chart-table-preview.tsx
index de9edc3af..9dbf3faa4 100644
--- a/app/components/chart-table-preview.tsx
+++ b/app/components/chart-table-preview.tsx
@@ -95,3 +95,24 @@ export const ChartTablePreviewProvider = ({
     </ChartTablePreviewContext.Provider>
   );
 };
+
+export const TABLE_PREVIEW_WRAPPER_CLASS_NAME = "table-preview-wrapper";
+
+export const TablePreviewWrapper = ({ children }: { children: ReactNode }) => {
+  const { containerRef, containerHeight } = useChartTablePreview();
+
+  return (
+    <div
+      ref={containerRef}
+      className={TABLE_PREVIEW_WRAPPER_CLASS_NAME}
+      style={{
+        minWidth: 0,
+        height: containerHeight,
+        marginTop: 16,
+        flexGrow: 1,
+      }}
+    >
+      {children}
+    </div>
+  );
+};

From 1a8aa2cd7dd54ec574acc79e2406e4255d72d93d Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 14:52:04 +0100
Subject: [PATCH 28/33] refactor: Make it possible to access original node when
 making screenshots

...so we can get actual height, which is problematic when we clone the node and need to get chart height.
---
 app/utils/use-screenshot.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/utils/use-screenshot.ts b/app/utils/use-screenshot.ts
index a95534f97..d0e997b4e 100644
--- a/app/utils/use-screenshot.ts
+++ b/app/utils/use-screenshot.ts
@@ -9,7 +9,7 @@ export type UseScreenshotProps = {
   type: ScreenshotFileFormat;
   screenshotName: string;
   screenshotNode?: HTMLElement | null;
-  modifyNode?: (d: HTMLElement) => void;
+  modifyNode?: (clonedNode: HTMLElement, originalNode: HTMLElement) => void;
   pngMetadata?: { key: PNG_METADATA_KEY; value: string }[];
 };
 
@@ -22,11 +22,11 @@ export const useScreenshot = ({
 }: UseScreenshotProps) => {
   const [loading, setLoading] = useState(false);
   const modifyNode = useCallback(
-    (node: HTMLElement) => {
-      removeDisabledElements(node);
+    (clonedNode: HTMLElement, originalNode: HTMLElement) => {
+      removeDisabledElements(clonedNode);
 
       if (_modifyNode) {
-        _modifyNode(node);
+        _modifyNode(clonedNode, originalNode);
       }
     },
     [_modifyNode]
@@ -81,7 +81,7 @@ const makeScreenshot = async ({
   type: "png" | "svg";
   name: string;
   node: HTMLElement;
-  modifyNode?: (d: HTMLElement) => void;
+  modifyNode?: (clonedNode: HTMLElement, originalNode: HTMLElement) => void;
   pngMetadata?: { key: PNG_METADATA_KEY; value: string }[];
 }) => {
   const isUsingSafari =
@@ -110,8 +110,8 @@ const makeScreenshot = async ({
     ctx.drawImage(canvasNode, 0, 0);
   }
 
-  wrapperNode.appendChild(clonedNode);
-  modifyNode?.(clonedNode);
+  const mountedClonedNode = wrapperNode.appendChild(clonedNode);
+  modifyNode?.(mountedClonedNode, node);
 
   // There's a bug with embedding the fonts in Safari, which appears only when
   // downloading the image for the first time. On subsequent downloads, the

From 0c4c21c3a64585c0205b1cacbf1a47f204714c69 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 14:54:07 +0100
Subject: [PATCH 29/33] fix: Screenshotting of free canvas layout charts

---
 app/components/chart-shared.tsx       | 85 +++++++++++++++++++--------
 app/components/chart-with-filters.tsx |  5 +-
 2 files changed, 62 insertions(+), 28 deletions(-)

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 400454634..6d13f7d6b 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -31,7 +31,11 @@ import {
   VisualizeLink,
 } from "@/components/chart-footnotes";
 import { chartPanelLayoutGridClasses } from "@/components/chart-panel-layout-grid";
-import { useChartTablePreview } from "@/components/chart-table-preview";
+import {
+  TABLE_PREVIEW_WRAPPER_CLASS_NAME,
+  useChartTablePreview,
+} from "@/components/chart-table-preview";
+import { useChartWithFiltersClasses } from "@/components/chart-with-filters";
 import { MenuActionItem } from "@/components/menu-action-item";
 import { MetadataPanel } from "@/components/metadata-panel";
 import {
@@ -393,10 +397,58 @@ const DownloadPNGImageMenuActionItem = ({
   chartKey: string;
   components: Component[];
 } & Omit<UseScreenshotProps, "type" | "modifyNode" | "pngMetadata">) => {
+  const modifyNode = useModifyNode();
+  const metadata = usePNGMetadata({
+    configKey,
+    chartKey,
+    components,
+  });
+  const { loading, screenshot } = useScreenshot({
+    type: "png",
+    screenshotName,
+    screenshotNode,
+    modifyNode,
+    pngMetadata: metadata,
+  });
+
+  return (
+    <MenuActionItem
+      type="button"
+      as="menuitem"
+      onClick={screenshot}
+      disabled={loading}
+      leadingIconName="download"
+      label={`${t({ id: "chart-controls.export", message: "Export" })} PNG`}
+    />
+  );
+};
+
+const useModifyNode = () => {
   const theme = useTheme();
-  const modifyNode = useCallback(
-    async (node: HTMLElement) => {
-      const footnotes = node.querySelector(`.${CHART_FOOTNOTES_CLASS_NAME}`);
+  const chartWithFiltersClasses = useChartWithFiltersClasses();
+
+  return useCallback(
+    async (clonedNode: HTMLElement, originalNode: HTMLElement) => {
+      // We need to explicitly set the height of the chart container to the height
+      // of the chart, as otherwise the screenshot won't work for free canvas charts.
+      const tablePreviewWrapper = clonedNode.querySelector(
+        `.${TABLE_PREVIEW_WRAPPER_CLASS_NAME}`
+      ) as HTMLElement | null;
+
+      if (tablePreviewWrapper) {
+        const chart = originalNode.querySelector(
+          `.${chartWithFiltersClasses.chartWithFilters}`
+        );
+
+        if (chart) {
+          const height = chart.clientHeight;
+          tablePreviewWrapper.style.height = `${height}px`;
+        }
+      }
+
+      const footnotes = clonedNode.querySelector(
+        `.${CHART_FOOTNOTES_CLASS_NAME}`
+      );
 
       if (footnotes) {
         const container = document.createElement("div");
@@ -415,34 +467,15 @@ const DownloadPNGImageMenuActionItem = ({
       // indicate interactive elements, which doesn't make sense for screenshots)
       // and not have underlines.
       const color = theme.palette.grey[700];
-      select(node)
+      select(clonedNode)
         .selectAll("*")
         .style("color", color)
         .style("text-decoration", "none");
       // SVG elements have fill instead of color. Here we only target text elements,
       // to avoid changing the color of other SVG elements (charts).
-      select(node).selectAll("text").style("fill", color);
+      select(clonedNode).selectAll("text").style("fill", color);
     },
-    [theme.palette.grey]
-  );
-  const metadata = usePNGMetadata({ configKey, chartKey, components });
-  const { loading, screenshot } = useScreenshot({
-    type: "png",
-    screenshotName,
-    screenshotNode,
-    modifyNode,
-    pngMetadata: metadata,
-  });
-
-  return (
-    <MenuActionItem
-      type="button"
-      as="menuitem"
-      onClick={screenshot}
-      disabled={loading}
-      leadingIconName="download"
-      label={`${t({ id: "chart-controls.export", message: "Export" })} PNG`}
-    />
+    [chartWithFiltersClasses.chartWithFilters, theme.palette.grey]
   );
 };
 
diff --git a/app/components/chart-with-filters.tsx b/app/components/chart-with-filters.tsx
index 37240eb09..909c21ffc 100644
--- a/app/components/chart-with-filters.tsx
+++ b/app/components/chart-with-filters.tsx
@@ -160,7 +160,7 @@ type ChartWithFiltersProps = {
   dashboardFilters: DashboardFiltersConfig | undefined;
 };
 
-const useStyles = makeStyles(() => ({
+export const useChartWithFiltersClasses = makeStyles(() => ({
   chartWithFilters: {
     width: "100%",
     height: "100%",
@@ -172,7 +172,8 @@ export const ChartWithFilters = forwardRef<
   ChartWithFiltersProps
 >((props, ref) => {
   useSyncInteractiveFilters(props.chartConfig, props.dashboardFilters);
-  const classes = useStyles();
+  const classes = useChartWithFiltersClasses();
+
   return (
     <div className={classes.chartWithFilters} ref={ref}>
       <Observer>

From ae9492deb0ba6afa993d5cbd377b9ab11e6ddfa8 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 15:09:08 +0100
Subject: [PATCH 30/33] feat: Disable map control elements

---
 app/charts/map/map.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx
index b1b8037ec..7bb3ac29f 100644
--- a/app/charts/map/map.tsx
+++ b/app/charts/map/map.tsx
@@ -32,6 +32,7 @@ import { GeoFeature, GeoPoint } from "@/domain/data";
 import { Icon, IconName } from "@/icons";
 import { useLocale } from "@/src";
 import useEvent from "@/utils/use-event";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 // supported was removed as of maplibre-gl v3.0.0, so we need to add it back
 const maplibregl = { ...maplibreglraw, supported };
@@ -391,7 +392,7 @@ export const MapComponent = () => {
   return (
     <>
       {locked ? null : (
-        <div className={classes.controlButtons}>
+        <div className={classes.controlButtons} {...DISABLE_SCREENSHOT_ATTR}>
           <ControlButton iconName="refresh" onClick={reset} />
           <ControlButton iconName="add" onClick={zoomIn} />
           <ControlButton iconName="minus" onClick={zoomOut} />

From e9dba7bde5d81cb964397350745bcd462cf8769a Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 15:09:38 +0100
Subject: [PATCH 31/33] feat: Remove attribution from map screenshots

...as it can cover half of the map in the dashboard view.
---
 app/components/chart-shared.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 6d13f7d6b..0730e94a3 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -463,6 +463,11 @@ const useModifyNode = () => {
         await new Promise((resolve) => setTimeout(resolve, 0));
       }
 
+      // Remove some elements that should not be included in the screenshot.
+      // For maps, we can't apply custom classes to internal elements, so we need
+      // to remove them here.
+      clonedNode.querySelector(".maplibregl-ctrl")?.remove();
+
       // Every text element should be dark-grey (currently we use primary.main to
       // indicate interactive elements, which doesn't make sense for screenshots)
       // and not have underlines.

From d66cec2ce4a49eab8533be7759e865cbbef10544 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 16:38:48 +0100
Subject: [PATCH 32/33] fix: Make modifyNode async and await animation frame
 where needed

---
 app/components/chart-shared.tsx |  4 ++--
 app/utils/animation-frame.ts    |  3 +++
 app/utils/use-screenshot.ts     | 22 ++++++++++++++++------
 3 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 app/utils/animation-frame.ts

diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 0730e94a3..ea2c74b15 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -55,6 +55,7 @@ import { useDataCubesMetadataQuery } from "@/graphql/hooks";
 import { getChartIcon } from "@/icons";
 import SvgIcMore from "@/icons/components/IcMore";
 import { useLocale } from "@/src";
+import { animationFrame } from "@/utils/animation-frame";
 import { createChartId } from "@/utils/create-chart-id";
 import {
   DISABLE_SCREENSHOT_ATTR,
@@ -459,8 +460,7 @@ const useModifyNode = () => {
             createdWith={t({ id: "metadata.link.created.with" })}
           />
         );
-        // Wait for the component to render before taking the screenshot.
-        await new Promise((resolve) => setTimeout(resolve, 0));
+        await animationFrame();
       }
 
       // Remove some elements that should not be included in the screenshot.
diff --git a/app/utils/animation-frame.ts b/app/utils/animation-frame.ts
new file mode 100644
index 000000000..475246540
--- /dev/null
+++ b/app/utils/animation-frame.ts
@@ -0,0 +1,3 @@
+export const animationFrame = () => {
+  return new Promise((resolve) => requestAnimationFrame(resolve));
+};
diff --git a/app/utils/use-screenshot.ts b/app/utils/use-screenshot.ts
index d0e997b4e..827040911 100644
--- a/app/utils/use-screenshot.ts
+++ b/app/utils/use-screenshot.ts
@@ -3,13 +3,18 @@ import { toPng, toSvg } from "html-to-image";
 import { addMetadata } from "meta-png";
 import { useCallback, useState } from "react";
 
+import { animationFrame } from "@/utils/animation-frame";
+
 type ScreenshotFileFormat = "png" | "svg";
 
 export type UseScreenshotProps = {
   type: ScreenshotFileFormat;
   screenshotName: string;
   screenshotNode?: HTMLElement | null;
-  modifyNode?: (clonedNode: HTMLElement, originalNode: HTMLElement) => void;
+  modifyNode?: (
+    clonedNode: HTMLElement,
+    originalNode: HTMLElement
+  ) => Promise<void>;
   pngMetadata?: { key: PNG_METADATA_KEY; value: string }[];
 };
 
@@ -22,11 +27,11 @@ export const useScreenshot = ({
 }: UseScreenshotProps) => {
   const [loading, setLoading] = useState(false);
   const modifyNode = useCallback(
-    (clonedNode: HTMLElement, originalNode: HTMLElement) => {
+    async (clonedNode: HTMLElement, originalNode: HTMLElement) => {
       removeDisabledElements(clonedNode);
 
       if (_modifyNode) {
-        _modifyNode(clonedNode, originalNode);
+        await _modifyNode(clonedNode, originalNode);
       }
     },
     [_modifyNode]
@@ -81,7 +86,10 @@ const makeScreenshot = async ({
   type: "png" | "svg";
   name: string;
   node: HTMLElement;
-  modifyNode?: (clonedNode: HTMLElement, originalNode: HTMLElement) => void;
+  modifyNode?: (
+    clonedNode: HTMLElement,
+    originalNode: HTMLElement
+  ) => Promise<void>;
   pngMetadata?: { key: PNG_METADATA_KEY; value: string }[];
 }) => {
   const isUsingSafari =
@@ -108,10 +116,12 @@ const makeScreenshot = async ({
     // manually copy it.
     const ctx = clonedCanvasNode.getContext("2d") as CanvasRenderingContext2D;
     ctx.drawImage(canvasNode, 0, 0);
+    await animationFrame();
   }
 
-  const mountedClonedNode = wrapperNode.appendChild(clonedNode);
-  modifyNode?.(mountedClonedNode, node);
+  await modifyNode?.(clonedNode, node);
+  wrapperNode.appendChild(clonedNode);
+  await animationFrame();
 
   // There's a bug with embedding the fonts in Safari, which appears only when
   // downloading the image for the first time. On subsequent downloads, the

From c8df4a71e8ee57c6c8860420a9937a9e8bfe30b6 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 5 Dec 2024 21:59:58 +0100
Subject: [PATCH 33/33] fix: Typos

---
 app/charts/shared/chart-helpers.tsx | 2 +-
 app/components/chart-footnotes.tsx  | 4 ++--
 app/components/chart-shared.tsx     | 4 ++--
 app/utils/use-screenshot.ts         | 3 +--
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx
index 0522f1980..6174be092 100644
--- a/app/charts/shared/chart-helpers.tsx
+++ b/app/charts/shared/chart-helpers.tsx
@@ -287,7 +287,7 @@ export const extractChartConfigComponentIds = ({
   );
 };
 
-export const extractChartConfigUsedCubes = (
+export const extractChartConfigUsedComponents = (
   chartConfig: ChartConfig,
   { components }: { components: Component[] }
 ) => {
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
index 536492604..cab1197bb 100644
--- a/app/components/chart-footnotes.tsx
+++ b/app/components/chart-footnotes.tsx
@@ -4,7 +4,7 @@ import { makeStyles } from "@mui/styles";
 import uniqBy from "lodash/uniqBy";
 import { ReactNode, useMemo } from "react";
 
-import { extractChartConfigUsedCubes } from "@/charts/shared/chart-helpers";
+import { extractChartConfigUsedComponents } from "@/charts/shared/chart-helpers";
 import { LegendItem } from "@/charts/shared/legend-color";
 import { ChartFiltersList } from "@/components/chart-filters-list";
 import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
@@ -58,7 +58,7 @@ export const ChartFootnotes = ({
 }) => {
   const locale = useLocale();
   const usedComponents = useMemo(() => {
-    return extractChartConfigUsedCubes(chartConfig, { components });
+    return extractChartConfigUsedComponents(chartConfig, { components });
   }, [chartConfig, components]);
   const [{ data }] = useDataCubesMetadataQuery({
     variables: {
diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index ea2c74b15..03bb67893 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -24,7 +24,7 @@ import {
   ChartDataFiltersToggle,
   useChartDataFiltersState,
 } from "@/charts/shared/chart-data-filters";
-import { extractChartConfigUsedCubes } from "@/charts/shared/chart-helpers";
+import { extractChartConfigUsedComponents } from "@/charts/shared/chart-helpers";
 import { ArrowMenuTopBottom } from "@/components/arrow-menu";
 import {
   CHART_FOOTNOTES_CLASS_NAME,
@@ -498,7 +498,7 @@ const usePNGMetadata = ({
   const chartConfig = getChartConfig(state, chartKey);
 
   const usedComponents = useMemo(() => {
-    return extractChartConfigUsedCubes(chartConfig, { components });
+    return extractChartConfigUsedComponents(chartConfig, { components });
   }, [chartConfig, components]);
 
   const [{ data }] = useDataCubesMetadataQuery({
diff --git a/app/utils/use-screenshot.ts b/app/utils/use-screenshot.ts
index 827040911..df7c686c5 100644
--- a/app/utils/use-screenshot.ts
+++ b/app/utils/use-screenshot.ts
@@ -62,8 +62,7 @@ export const useScreenshot = ({
 };
 
 // https://dev.exiv2.org/projects/exiv2/wiki/The_Metadata_in_PNG_files#2-Textual-information-chunks-the-metadata-in-PNG
-// We can use custom keys, but we should avoid using keys that are already used
-// by other software.
+// We can use custom keys, but we should use keys already used by other software.
 type PNG_METADATA_KEY =
   | "Title"
   | "Author"