From f835fb4482a209454696afd8c7d7a8de8cba2d96 Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Fri, 6 Jun 2025 10:58:01 -0400
Subject: [PATCH 1/3] [Statistics] Migrate from deprecated Grid2 and use a
 Table

---
 .../Statistics/DomainStatistics.tsx           | 64 ++++++++-----------
 src/components/Statistics/Statistics.tsx      | 51 ++++++---------
 src/components/Statistics/TableCells.tsx      | 41 +++++-------
 src/components/Statistics/UserStatistics.tsx  | 55 ++++++++--------
 .../tests/DomainStatistics.test.tsx           |  6 +-
 .../Statistics/tests/Statistics.test.tsx      |  2 +-
 .../Statistics/tests/UserStatistics.test.tsx  |  8 ++-
 7 files changed, 98 insertions(+), 129 deletions(-)

diff --git a/src/components/Statistics/DomainStatistics.tsx b/src/components/Statistics/DomainStatistics.tsx
index d8a7fea5d9..202df51bfb 100644
--- a/src/components/Statistics/DomainStatistics.tsx
+++ b/src/components/Statistics/DomainStatistics.tsx
@@ -1,10 +1,17 @@
-import { Card, Grid, ListItem, List } from "@mui/material";
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
 import { ReactElement, useState, useEffect } from "react";
 
-import { SemanticDomainCount, SemanticDomainTreeNode } from "api/models";
+import { SemanticDomainCount } from "api/models";
 import { getSemanticDomainCounts } from "backend";
 import * as LocalStorage from "backend/localStorage";
-import { ColumnHead, TableCell } from "components/Statistics/TableCells";
+import { Cell, HeadCell } from "components/Statistics/TableCells";
 
 interface DomainStatisticsProps {
   lang: string;
@@ -38,40 +45,25 @@ export default function DomainStatistics(
   }
 
   return (
-    <Grid container justifyContent="center">
-      <Card style={{ width: 600 }}>
-        <List>
-          <Grid container wrap="nowrap" justifyContent="space-around">
-            <ColumnHead titleId={"statistics.column.domainNumber"} />
-            <ColumnHead titleId={"statistics.column.domainName"} />
-            <ColumnHead titleId={"statistics.column.senseCount"} />
-          </Grid>
-        </List>
-        <List>
+    <TableContainer component={Paper} sx={{ maxWidth: 700 }}>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <HeadCell titleId={"statistics.column.domainNumber"} />
+            <HeadCell titleId={"statistics.column.domainName"} />
+            <HeadCell titleId={"statistics.column.senseCount"} />
+          </TableRow>
+        </TableHead>
+        <TableBody>
           {statisticsList.map((t) => (
-            <TableRow
-              key={t.semanticDomainTreeNode.id}
-              dom={t.semanticDomainTreeNode}
-              count={t.count}
-            />
+            <TableRow key={t.semanticDomainTreeNode.id}>
+              <Cell text={t.semanticDomainTreeNode.id} />
+              <Cell text={t.semanticDomainTreeNode.name} />
+              <Cell text={t.count} />
+            </TableRow>
           ))}
-        </List>
-      </Card>
-    </Grid>
-  );
-}
-
-function TableRow(props: {
-  dom: SemanticDomainTreeNode;
-  count: number;
-}): ReactElement {
-  return (
-    <ListItem style={{ minWidth: "600px" }}>
-      <Grid container wrap="nowrap" justifyContent="space-around">
-        <TableCell text={props.dom.id} />
-        <TableCell text={props.dom.name} />
-        <TableCell text={props.count} />
-      </Grid>
-    </ListItem>
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/components/Statistics/Statistics.tsx b/src/components/Statistics/Statistics.tsx
index c9d63120fa..a38a33b087 100644
--- a/src/components/Statistics/Statistics.tsx
+++ b/src/components/Statistics/Statistics.tsx
@@ -1,6 +1,6 @@
 import {
   Divider,
-  Grid,
+  Grid2,
   ListItemButton,
   ListItemText,
   Typography,
@@ -65,24 +65,6 @@ export default function Statistics(): ReactElement {
     }
   }
 
-  function handleDisplay(): ReactElement[] {
-    return [
-      <Grid item key={"statistics-title"}>
-        <Typography variant="h4" align="center">
-          {t("statistics.title", { val: currentProject?.name })}
-        </Typography>
-      </Grid>,
-      <Grid item key={"statistics-subtitle"}>
-        <Typography variant="h5" align="center">
-          {t(`statistics.view.${viewName}`)}
-        </Typography>
-      </Grid>,
-      <Grid item key={"statistics-view"}>
-        {componentToDisplay(viewName as viewEnum)}
-      </Grid>,
-    ];
-  }
-
   function handleButton(): ReactElement {
     return (
       <StyledList>
@@ -118,23 +100,28 @@ export default function Statistics(): ReactElement {
   }
 
   return (
-    <Grid container direction="row" spacing={1}>
-      <Grid item xs={2}>
-        {handleButton()}
-      </Grid>
-      <Grid
-        item
-        xs={8}
+    <Grid2 container direction="row" spacing={1}>
+      <Grid2 size={2}>{handleButton()}</Grid2>
+
+      <Grid2
+        alignContent="space-around"
         container
         direction="column"
-        justifyContent="center"
+        size={8}
         spacing={2}
       >
-        {handleDisplay()}
-      </Grid>
-      <Grid item xs={2}>
+        <Typography align="center" variant="h4">
+          {t("statistics.title", { val: currentProject?.name })}
+        </Typography>
+        <Typography align="center" variant="h5">
+          {t(`statistics.view.${viewName}`)}
+        </Typography>
+        {componentToDisplay(viewName as viewEnum)}
+      </Grid2>
+
+      <Grid2 size={2}>
         <ProgressBarComponent />
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }
diff --git a/src/components/Statistics/TableCells.tsx b/src/components/Statistics/TableCells.tsx
index 0c698852de..c57ce0142e 100644
--- a/src/components/Statistics/TableCells.tsx
+++ b/src/components/Statistics/TableCells.tsx
@@ -1,38 +1,27 @@
-import { Grid, Typography } from "@mui/material";
-import { ReactElement } from "react";
+import { TableCell, Typography } from "@mui/material";
+import { CSSProperties, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
-export function ColumnHead(props: { titleId: string }): ReactElement {
+const cellStyle: CSSProperties = {
+  borderBottomStyle: "dotted",
+  borderBottomWidth: 1,
+  position: "relative",
+};
+
+export function HeadCell(props: { titleId: string }): ReactElement {
   const { t } = useTranslation();
+
   return (
-    <Grid
-      item
-      xs={5}
-      style={{
-        borderBottomStyle: "dotted",
-        borderBottomWidth: 1,
-        position: "relative",
-      }}
-    >
+    <TableCell style={cellStyle}>
       <Typography variant="subtitle1">{t(props.titleId)}</Typography>
-    </Grid>
+    </TableCell>
   );
 }
 
-export function TableCell(props: {
-  text?: string | number | null;
-}): ReactElement {
+export function Cell(props: { text?: string | number | null }): ReactElement {
   return (
-    <Grid
-      item
-      xs={5}
-      style={{
-        borderBottomStyle: "dotted",
-        borderBottomWidth: 1,
-        position: "relative",
-      }}
-    >
+    <TableCell style={cellStyle}>
       <Typography variant="body1">{props.text}</Typography>
-    </Grid>
+    </TableCell>
   );
 }
diff --git a/src/components/Statistics/UserStatistics.tsx b/src/components/Statistics/UserStatistics.tsx
index 63b434cfb6..91267a4bdf 100644
--- a/src/components/Statistics/UserStatistics.tsx
+++ b/src/components/Statistics/UserStatistics.tsx
@@ -1,10 +1,17 @@
-import { Card, Grid, ListItem, List } from "@mui/material";
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
 import { ReactElement, useState, useEffect } from "react";
 
 import { SemanticDomainUserCount } from "api/models";
 import { getSemanticDomainUserCount } from "backend";
 import * as LocalStorage from "backend/localStorage";
-import { ColumnHead, TableCell } from "components/Statistics/TableCells";
+import { Cell, HeadCell } from "components/Statistics/TableCells";
 
 interface UserStatisticsProps {
   lang: string;
@@ -38,33 +45,25 @@ export default function UserStatistics(
   }
 
   return (
-    <Grid container justifyContent="center">
-      <Card style={{ width: 600 }}>
-        <List>
-          <Grid container wrap="nowrap" justifyContent="space-around">
-            <ColumnHead titleId={"statistics.column.username"} />
-            <ColumnHead titleId={"statistics.column.domainCount"} />
-            <ColumnHead titleId={"statistics.column.senseCount"} />
-          </Grid>
-        </List>
-        <List>
+    <TableContainer component={Paper} sx={{ maxWidth: 700 }}>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <HeadCell titleId={"statistics.column.username"} />
+            <HeadCell titleId={"statistics.column.domainCount"} />
+            <HeadCell titleId={"statistics.column.senseCount"} />
+          </TableRow>
+        </TableHead>
+        <TableBody>
           {domainUserCountList.map((t) => (
-            <TableRow key={t.id} counts={t} />
+            <TableRow key={t.id}>
+              <Cell text={t.username} />
+              <Cell text={t.domainCount} />
+              <Cell text={t.wordCount} />
+            </TableRow>
           ))}
-        </List>
-      </Card>
-    </Grid>
-  );
-}
-
-function TableRow(props: { counts: SemanticDomainUserCount }): ReactElement {
-  return (
-    <ListItem style={{ minWidth: "600px" }}>
-      <Grid container wrap="nowrap" justifyContent="space-around">
-        <TableCell text={props.counts.username} />
-        <TableCell text={props.counts.domainCount} />
-        <TableCell text={props.counts.wordCount} />
-      </Grid>
-    </ListItem>
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/components/Statistics/tests/DomainStatistics.test.tsx b/src/components/Statistics/tests/DomainStatistics.test.tsx
index 1cb640243a..c5050295a7 100644
--- a/src/components/Statistics/tests/DomainStatistics.test.tsx
+++ b/src/components/Statistics/tests/DomainStatistics.test.tsx
@@ -43,8 +43,8 @@ describe("DomainStatistics", () => {
     expect(mockGetProjectId).toHaveBeenCalled();
   });
 
-  test("all list items are present", async () => {
-    const listItems = screen.queryAllByRole("listitem");
-    expect(listItems.length).toEqual(mockSemanticDomainCountArray.length);
+  test("all rows are present", async () => {
+    const listItems = screen.queryAllByRole("row");
+    expect(listItems.length).toEqual(mockSemanticDomainCountArray.length + 1);
   });
 });
diff --git a/src/components/Statistics/tests/Statistics.test.tsx b/src/components/Statistics/tests/Statistics.test.tsx
index 741a9739c9..9f983ca06a 100644
--- a/src/components/Statistics/tests/Statistics.test.tsx
+++ b/src/components/Statistics/tests/Statistics.test.tsx
@@ -35,7 +35,7 @@ beforeEach(async () => {
     render(
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
-          <Statistics />{" "}
+          <Statistics />
         </ThemeProvider>
       </StyledEngineProvider>
     );
diff --git a/src/components/Statistics/tests/UserStatistics.test.tsx b/src/components/Statistics/tests/UserStatistics.test.tsx
index b26e73a876..8920c95f71 100644
--- a/src/components/Statistics/tests/UserStatistics.test.tsx
+++ b/src/components/Statistics/tests/UserStatistics.test.tsx
@@ -42,8 +42,10 @@ describe("UserStatistics", () => {
     expect(mockGetProjectId).toHaveBeenCalled();
   });
 
-  test("all list items are present", async () => {
-    const listItems = screen.queryAllByRole("listitem");
-    expect(listItems.length).toEqual(mockSemanticDomainUserCountArray.length);
+  test("all rows are present", async () => {
+    const listItems = screen.queryAllByRole("row");
+    expect(listItems.length).toEqual(
+      mockSemanticDomainUserCountArray.length + 1
+    );
   });
 });

From 2f5fdd8638603b99fa8839ed50d798fe5155fa4d Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Thu, 19 Jun 2025 09:02:32 -0400
Subject: [PATCH 2/3] Simplify cell styling

---
 src/components/Statistics/TableCells.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/Statistics/TableCells.tsx b/src/components/Statistics/TableCells.tsx
index c57ce0142e..5b08307735 100644
--- a/src/components/Statistics/TableCells.tsx
+++ b/src/components/Statistics/TableCells.tsx
@@ -1,18 +1,12 @@
 import { TableCell, Typography } from "@mui/material";
-import { CSSProperties, ReactElement } from "react";
+import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
-const cellStyle: CSSProperties = {
-  borderBottomStyle: "dotted",
-  borderBottomWidth: 1,
-  position: "relative",
-};
-
 export function HeadCell(props: { titleId: string }): ReactElement {
   const { t } = useTranslation();
 
   return (
-    <TableCell style={cellStyle}>
+    <TableCell sx={{ borderBottomWidth: 1 }}>
       <Typography variant="subtitle1">{t(props.titleId)}</Typography>
     </TableCell>
   );
@@ -20,7 +14,7 @@ export function HeadCell(props: { titleId: string }): ReactElement {
 
 export function Cell(props: { text?: string | number | null }): ReactElement {
   return (
-    <TableCell style={cellStyle}>
+    <TableCell sx={{ borderBottomStyle: "dotted", borderBottomWidth: 1 }}>
       <Typography variant="body1">{props.text}</Typography>
     </TableCell>
   );

From 5d1e069c63b8e96b1d33b16f21678f645f9691c8 Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Thu, 10 Jul 2025 11:00:53 -0400
Subject: [PATCH 3/3] Comment +1 reason

---
 src/components/Statistics/tests/DomainStatistics.test.tsx | 4 ++--
 src/components/Statistics/tests/UserStatistics.test.tsx   | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Statistics/tests/DomainStatistics.test.tsx b/src/components/Statistics/tests/DomainStatistics.test.tsx
index c5050295a7..7976e67cee 100644
--- a/src/components/Statistics/tests/DomainStatistics.test.tsx
+++ b/src/components/Statistics/tests/DomainStatistics.test.tsx
@@ -44,7 +44,7 @@ describe("DomainStatistics", () => {
   });
 
   test("all rows are present", async () => {
-    const listItems = screen.queryAllByRole("row");
-    expect(listItems.length).toEqual(mockSemanticDomainCountArray.length + 1);
+    const expectedRowCount = mockSemanticDomainCountArray.length + 1; // +1 for the header row
+    expect(screen.queryAllByRole("row")).toHaveLength(expectedRowCount);
   });
 });
diff --git a/src/components/Statistics/tests/UserStatistics.test.tsx b/src/components/Statistics/tests/UserStatistics.test.tsx
index 7006636acd..fcff5be8ff 100644
--- a/src/components/Statistics/tests/UserStatistics.test.tsx
+++ b/src/components/Statistics/tests/UserStatistics.test.tsx
@@ -43,9 +43,7 @@ describe("UserStatistics", () => {
   });
 
   test("all rows are present", async () => {
-    const listItems = screen.queryAllByRole("row");
-    expect(listItems.length).toEqual(
-      mockSemanticDomainUserCountArray.length + 1
-    );
+    const expectedRowCount = mockSemanticDomainUserCountArray.length + 1; // +1 for the header row
+    expect(screen.queryAllByRole("row")).toHaveLength(expectedRowCount);
   });
 });