From 4b209166f77452e7389b8990cadd521f54a3f495 Mon Sep 17 00:00:00 2001
From: "joseph.marinier" <joseph.marinier@servicenow.com>
Date: Wed, 7 Dec 2022 12:57:48 -0500
Subject: [PATCH] Fix similar and perturbed long utterances

---
 CHANGELOG.md                                       |  1 +
 .../components/Utterance/PerturbedUtterances.tsx   | 14 ++++++++++++++
 .../src/components/Utterance/SimilarUtterances.tsx | 14 +++++++++++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 95aebdf7..f5ce2dec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,5 +19,6 @@ Released changes are shown in the
 ### Removed
 
 ### Fixed
+- Showing long utterances fully on hover in similar and perturbed utterances tables.
 
 ### Security
diff --git a/webapp/src/components/Utterance/PerturbedUtterances.tsx b/webapp/src/components/Utterance/PerturbedUtterances.tsx
index 30d4890b..944d656f 100644
--- a/webapp/src/components/Utterance/PerturbedUtterances.tsx
+++ b/webapp/src/components/Utterance/PerturbedUtterances.tsx
@@ -1,5 +1,6 @@
 import { Box, Tooltip, Typography } from "@mui/material";
 import { GridCellParams } from "@mui/x-data-grid";
+import HoverableDataCell from "components/Analysis/HoverableDataCell";
 import CheckIcon from "components/Icons/Check";
 import XIcon from "components/Icons/X";
 import { Column, Table } from "components/Table";
@@ -89,6 +90,14 @@ export const perturbedUtterancesColumns: Column<Row>[] = [
     flex: 1,
     minWidth: 408,
     sortable: false,
+    cellClassName: "hoverableDataCell",
+    renderCell: ({ value }: GridCellParams<string>) => (
+      <HoverableDataCell>
+        <Typography variant="inherit" whiteSpace="pre-wrap">
+          {value}
+        </Typography>
+      </HoverableDataCell>
+    ),
   },
   {
     field: "prediction",
@@ -171,6 +180,11 @@ const PerturbedUtterances: React.FC<Props> = (props) => {
       error={error}
       loading={isFetching}
       rows={rows}
+      sx={{
+        "& .hoverableDataCell": {
+          position: "relative",
+        },
+      }}
     />
   );
 };
diff --git a/webapp/src/components/Utterance/SimilarUtterances.tsx b/webapp/src/components/Utterance/SimilarUtterances.tsx
index d1e4d887..7e39c721 100644
--- a/webapp/src/components/Utterance/SimilarUtterances.tsx
+++ b/webapp/src/components/Utterance/SimilarUtterances.tsx
@@ -1,7 +1,8 @@
 import { Warning } from "@mui/icons-material";
-import { Tooltip } from "@mui/material";
+import { Tooltip, Typography } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { GridCellParams, GridRow } from "@mui/x-data-grid";
+import HoverableDataCell from "components/Analysis/HoverableDataCell";
 import CopyButton from "components/CopyButton";
 import { Column, RowProps, Table } from "components/Table";
 import VisualBar from "components/VisualBar";
@@ -19,6 +20,9 @@ const useStyles = makeStyles(() => ({
       visibility: "hidden",
     },
   },
+  hoverableDataCell: {
+    position: "relative",
+  },
 }));
 
 type Row = SimilarUtterance & { id: number };
@@ -59,6 +63,14 @@ const SimilarUtterances: React.FC<Props> = ({
       headerName: "Similar Utterance",
       flex: 1,
       sortable: false,
+      cellClassName: classes.hoverableDataCell,
+      renderCell: ({ value }: GridCellParams<string>) => (
+        <HoverableDataCell>
+          <Typography variant="inherit" whiteSpace="pre-wrap">
+            {value}
+          </Typography>
+        </HoverableDataCell>
+      ),
     },
     {
       field: "utteranceCopyButton",