From ff2a4374af4d740beda8ca10f739b7cc62325c98 Mon Sep 17 00:00:00 2001
From: dvmartinweigl <martin.weigl@datavisyn.io>
Date: Tue, 17 Oct 2023 14:43:47 +0200
Subject: [PATCH] add column description to correlation matrix

---
 src/vis/correlation/CorrelationMatrix.tsx | 31 ++++++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/vis/correlation/CorrelationMatrix.tsx b/src/vis/correlation/CorrelationMatrix.tsx
index 11cbe75a1..115bcfe74 100644
--- a/src/vis/correlation/CorrelationMatrix.tsx
+++ b/src/vis/correlation/CorrelationMatrix.tsx
@@ -1,4 +1,4 @@
-import { Box, Center, Group, Loader, Stack, Text } from '@mantine/core';
+import { Box, Center, Group, Loader, Stack, Text, Tooltip } from '@mantine/core';
 import { useResizeObserver } from '@mantine/hooks';
 import * as d3 from 'd3v7';
 import { scaleBand } from 'd3v7';
@@ -144,9 +144,32 @@ export function CorrelationMatrix({ config, columns }: { config: ICorrelationCon
           <rect stroke="lightgray" strokeWidth={1} fill="none" x={currentX} y={currentY} width={xScale.bandwidth()} height={yScale.bandwidth()} />
           <foreignObject x={currentX} y={currentY} width={xScale.bandwidth()} height={yScale.bandwidth()}>
             <Center style={{ height: '100%' }} px={5}>
-              <Text size={14} weight={600} style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>
-                {col.info.name}
-              </Text>
+              <Tooltip
+                label={
+                  <Stack spacing={0}>
+                    <Text>{col.info.name}</Text>
+                    {col.info.description && (
+                      <Text size="xs" color="dimmed">
+                        {col.info.description}
+                      </Text>
+                    )}
+                  </Stack>
+                }
+                arrowSize={6}
+                withinPortal
+                withArrow
+              >
+                <Stack spacing={0}>
+                  <Text size={14} weight={600} style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>
+                    {col.info.name}
+                  </Text>
+                  {col.info.description && (
+                    <Text size="sm" color="dimmed" style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>
+                      {col.info.description}
+                    </Text>
+                  )}
+                </Stack>
+              </Tooltip>
             </Center>
           </foreignObject>
         </g>