ok

Author: nikgreg99

analyticq-frontend/src/components/layout/EmptyState.jsx

@@ -1,7 +1,8 @@
 import React from "react";
 import {
-    Box,
-    Alert
+    Alert,
+    Flex,
+    CloseButton
 } from "@chakra-ui/react";
 
 /**
@@ -15,25 +16,30 @@ import {
  */
 const EmptyState = ({ title, message }) => {
     return (
-        <Box
+        <Flex
             p={6}
-            maxW="md"
             textAlign="center"
+            width="100%"
+            height="100%"
+            align="center"
+            justify="center"
         >
             <Alert.Root
                 status="info"
                 title={title}
                 role="alert" // Ensure the alert is announced immediately
                 aria-live="assertive" // Ensure screen readers announce this content as soon as it appears
                 aria-atomic="true"
+                 width="100%"
             >
                 <Alert.Indicator />
-                <Alert.Content maxWidth="md">
+                <Alert.Content  textAlign="center">
                     <Alert.Title>{title}</Alert.Title>
                     <Alert.Description>{message}</Alert.Description>
                 </Alert.Content>
+                <CloseButton pos="relative" top="-2" insetEnd="-2" />
             </Alert.Root>
-        </Box>
+        </Flex>
     );
 };
 

analyticq-frontend/src/components/layout/ErrorDisplay.jsx

@@ -1,8 +1,9 @@
 import React from "react";
 import {
+    Box,
     Alert,
     HStack,
-    Flex
+    Flex,
 } from "@chakra-ui/react";
 
 /**
@@ -17,18 +18,19 @@ import {
  */
 const ErrorDisplay = ({ title, error, backButton }) => (
     <Flex
-        justify="center"
-        align="center"
-
     >
         <Alert.Root
             role="alert"
             aria-live="assertive"
             aria-labelledby="error-title"
             status="error"
             mb={4}
+            width="100%"
+            height="100%"
+             align="center"
+            justify="center"
         >
-            <Alert.Content>
+            <Alert.Content textAlign="center">
                 <Alert.Indicator />
                 <Alert.Title>{title}</Alert.Title>
                 <Alert.Description>{error}</Alert.Description>

analyticq-frontend/src/components/ui/ExclusionStatsSummary.jsx

@@ -32,7 +32,6 @@ import { ProgessBarLabeled } from "./ProgessBarLabeled";
  */
 export const ExclusionSummary = ({ excludedFiles, totalScanned, repoName }) => {
 
-    const [showAllFiles, setShowAllFiles] = useState(false);
 
     const totalAnalyzed = totalScanned + excludedFiles.total_size;
     const excludedPercentage = (excludedFiles.total_size / totalAnalyzed) * 100;
@@ -55,12 +54,10 @@ export const ExclusionSummary = ({ excludedFiles, totalScanned, repoName }) => {
 
         excludedFiles.files.forEach(file => {
             const fileName = getFileName(file);
-            const extension = getFileExtension(file);
 
             fileCountMap[fileName] = fileCountMap[fileName] || {
                 fullPath: file,
                 count: 0,
-                extension: extension,
                 estimatedSize: Math.round(excludedFiles.total_size / excludedFiles.count)
             };
             fileCountMap[fileName].count++;
@@ -74,7 +71,7 @@ export const ExclusionSummary = ({ excludedFiles, totalScanned, repoName }) => {
             }))
             .sort((a, b) => b.count - a.count);
 
-    }, [excludedFiles.files]);
+    }, [excludedFiles]);
 
     return (
         <Card.Root

analyticq-frontend/src/components/ui/ExportScanReport.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useCallback } from "react";
 import { useDownloadScanReport } from "hooks/useDownloadScanReport";
 import {
     Box,
@@ -55,7 +55,7 @@ export const ExportScanReport = ({ scanId, isCompact = false }) => {
         }
     ], []);
 
-    const handleExport = async (format) => {
+    const handleExport = useCallback(async (format) => {
 
         if (isDownloading) return;
 
@@ -80,7 +80,7 @@ export const ExportScanReport = ({ scanId, isCompact = false }) => {
                 max: 4
             })
         }
-    }
+    }, [downloadReport, isDownloading, scanId]);
 
     return (
         <Box
@@ -108,7 +108,7 @@ export const ExportScanReport = ({ scanId, isCompact = false }) => {
                         spinner={<Spinner size="sm"/>}
                         data-testid="export-report-button"
                     >
-                        {menuOpened ? <FiChevronDown /> : <FiChevronUp />}
+                        {menuOpened ? <FiChevronUp /> : <FiChevronDown />}
                         {isCompact ? "Export" : "Export Report"}
                         <FaFileDownload />
                     </Button>