From 2711028f9116db411635db8398278e31aef660cc Mon Sep 17 00:00:00 2001
From: Eduardo Peredo Rivero <jrperedo@gmail.com>
Date: Mon, 18 Mar 2024 21:47:27 -0500
Subject: [PATCH] add tooltip for steps

---
 .../progress-status/ProgressStatus.tsx          | 17 ++++++++++-------
 src/webapp/utils/analysis.tsx                   | 12 +++++++-----
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/webapp/components/progress-status/ProgressStatus.tsx b/src/webapp/components/progress-status/ProgressStatus.tsx
index 3d190f6..39d5b75 100644
--- a/src/webapp/components/progress-status/ProgressStatus.tsx
+++ b/src/webapp/components/progress-status/ProgressStatus.tsx
@@ -13,13 +13,16 @@ export type ContainerProps = {
     $status: Props["status"];
 };
 
-export const ProgressStatus: React.FC<Props> = React.memo(({ status, position }) => {
-    return (
-        <Container $status={status}>
-            <StyledTypography>{position}</StyledTypography>
-        </Container>
-    );
-});
+export const ProgressStatus: React.FC<Props> = React.memo(
+    React.forwardRef<HTMLLIElement, Props>((props, ref) => {
+        const { status, position, ...rest } = props;
+        return (
+            <Container {...rest} ref={ref} $status={status}>
+                <StyledTypography>{position}</StyledTypography>
+            </Container>
+        );
+    })
+);
 
 const Container = styled.li<ContainerProps>`
     border-radius: 50%;
diff --git a/src/webapp/utils/analysis.tsx b/src/webapp/utils/analysis.tsx
index 1713a35..92c6b64 100644
--- a/src/webapp/utils/analysis.tsx
+++ b/src/webapp/utils/analysis.tsx
@@ -3,6 +3,7 @@ import { ProgressContainer } from "../pages/dashboard/mock";
 import { ProgressStatus } from "../components/progress-status/ProgressStatus";
 import { QualityAnalysis } from "$/domain/entities/QualityAnalysis";
 import { TableColumn } from "@eyeseetea/d2-ui-components";
+import { Tooltip } from "@material-ui/core";
 
 function mapAnalysisStatusToColor(sectionStatus: string) {
     switch (sectionStatus) {
@@ -31,11 +32,12 @@ export const analysisColumns: TableColumn<QualityAnalysis>[] = [
             return (
                 <ProgressContainer>
                     {row.sections.map((value, index) => (
-                        <ProgressStatus
-                            key={index}
-                            position={index + 1}
-                            status={mapAnalysisStatusToColor(value.status)}
-                        />
+                        <Tooltip key={value.id} title={value.name}>
+                            <ProgressStatus
+                                position={index + 1}
+                                status={mapAnalysisStatusToColor(value.status)}
+                            />
+                        </Tooltip>
                     ))}
                 </ProgressContainer>
             );