From 6562a3e9a22ddf2fae126f4c441bc01de7a414bb Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Wed, 4 Dec 2024 13:26:56 +0100
Subject: [PATCH] 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..707fab94d 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);