add tooltip for steps

EyeSeeTea · Mar 19, 2024 · 2711028 · 2711028
1 parent dc5098b
commit 2711028
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git 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
@@ -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>
             );